HTML textarea多行文字框

admin發表於2018-02-13
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）.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屬性設定文字域輸入內容提示功能。

[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只有一個屬性值"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，也就是不包含換行符。

相關文章