HTML textarea 多行文字框

admin發表於2019-09-20
HTML

單行文字框只能夠輸入一行內容，textarea多行文字框可以輸入多行文字。

多行文字框用textarea標籤建立，而不是input標籤。

通常用於需要輸入較多內容的需求。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20" name="message"></textarea>
</form>
</body>
</html>

上面程式碼演示了簡單多行文字框的應用。

特別說明：name屬性是必須的，否則後臺無法接收提交的表單資料。

單行文字框還有其他屬性，下面分別做一下介紹：

（1）.rows：規定多行文字框的行數。

（2）.cols：規定多行文字框的列數。

（3）.disabled：規定多行文字域是否可用。

（3）.form（HTML5）：規定多行文字域所屬的一個或多個表單。

（4）.maxlength：規定文字域可以輸入的最大字元數。

（5）.placeholder（HTML5）：提供一種提示，描述所期待的值。

（6）.readonly：設定文字域為只讀。

（7）.required（HTML5）：規定文字域內容是必填的。

（8）.autofocus（HTML5）：規定文字域在頁面載入後自動獲取焦點。

（9）.wrap:（HTML5）：規定當在表單中提交時，文字區域中的文字如何換行。

特別說明：此文字框不能夠使用value屬性規定它的初始值。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20"  maxlength="10" name="message"></textarea>
</form>
</body>
</html>

設定文字域輸入字元最大個數為10，如果超過此數目，輸入無效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea placeholder="請輸入留言內容" name="message"></textarea>
</form>
</body>
</html>

placeholder屬性設定多行文字域期待輸入內容的提示，之前通常需要結合JS實現類似功能。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea required placeholder="請輸入留言內容" name="message"></textarea>
    <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

required屬性可以設定為本域為必填，否則會報錯，直接填寫屬性即可，無需設定屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea rows="5" cols="20"  autofocus name="message"></textarea>
  <input type="submit" value="提交表單">
</form>
</body>
</html>

autofocus屬性規定文字域在頁面載入後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單">
</form>
留言:<br>
<textarea rows="5" cols="20"  form="ant" name="message"></textarea>
</body>
</html>

form屬性引用所屬表單的id，於是，雖然文字域在<form>之外，但依然是該表單的一部分。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  留言:<br>
  <textarea  wrap="hard" name="message">只有努力奮鬥才會有美好的未來，螞蟻部落</textarea>
  <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

當提交表單時，wrap="hard" 的文字區域中的文字會包含換行符（如果有換行符）。

wrap屬性的預設值是soft，也就是不包含換行符。

相關文章