HTML textarea 多行文字框
單行文字框只能夠輸入一行內容,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,也就是不包含換行符。
相關文章
- textarea 多行文字域 type 屬性值
- textarea文字框高度自適應程式碼例項
- Objective-C:多行文字輸入框(UITextView)ObjectUITextView
- 實現高度“聽話”的多行文字輸入框
- jQuery textarea框高度自適應jQuery
- CSS 多行文字居中CSS
- html input文字輸入框的一些總結HTML
- 直播系統原始碼,讀取多行文字、讀取檔案分割多行文字原始碼
- 富文字框
- Android支援多行文字省略EllipsizeAndroid
- CSS多行文字垂直居中效果CSS
- css3多行文字多行文字縮略點選更多展開顯示全部CSSS3
- dwg、dxf檔案多行文字轉單行文字
- 動態新增或減少文字框,並獲取文字框值
- 純 CSS 實現多行文字截斷CSS
- 文字框和標籤
- CSS 文字框圓角CSS
- 文字域(textarea)中字型受縮放影響的解決方案
- 文字框輸入文字倒計詳解
- HTML————7、HTML文字格式化HTML
- 多行文字加省略號的處理方法
- css 多行文字溢位省略號顯示CSS
- 多行文字溢位時出現省略號
- HTML input password 密碼框HTML密碼
- HTML input password密碼框HTML密碼
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- CSS匹配input text文字框CSS
- Python文字框與按鈕Python
- web前端技巧-文字如何垂直居中?多行文字如何實現上下居中?Web前端
- 文字框文字輸入數量倒計效果
- SharePoint 多行文字欄位設定預設值
- css多行文字垂直居中程式碼例項CSS
- 【動畫進階】類 ChatGpt 多行文字打字效果動畫ChatGPT
- HTML 文字格式化HTML
- CSS 多行文字超連結下劃線動效CSS
- 單行和多行文字溢位使用省略號代替
- 多行文字末尾新增圖片排版問題解決