HTML input text單行文字域
<input>元素將type屬性值設定為"text"即可實現單行文字域。
程式碼例項如下:
[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"> 使用者名稱:<input type="text" name="username"> </form> </body> </html>
上面的程式碼簡單演示了單行文字域的用法。
特別說明:name屬性是必須的,否則後臺無法接收提交的表單資料。
單行文字框還有其他屬性,下面分別做一下介紹:
(1).value:規定文字域的value屬性值,也就是我們所看到的文字域中的內容。
(2).size:是一種視覺化設計屬性,推薦使用css的width屬性替代。
(3).maxlength:規定文字域可以輸入的最大字元數。
(4).placeholder(HTML5):提供一種提示,描述所期待的值。
(5).required(HTML5):規定文字域內容是必填的。
(6).pattern(HTML5):規定用於驗證文字域內容格式的正規表示式。
(7).list(HTML5):規定輸入域的datalist,具體參閱HTML datalist選項列表一章節。
(8).form(HTML5):規定輸入域所屬的一個或多個表單。
(9).autofocus(HTML5):規定在頁面載入時,域自動地獲得焦點。
(10).autocomplete(HTML5):規定文字域是否具有自動完成功能。
(11).readonly:設定文字域為只讀。
程式碼例項:
[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"> 使用者名稱:<input type="text" maxlength="10" name="username"> </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"> 姓名:<input type="text" required placeholder="請輸入使用者名稱" name="username"> <input type="submit" value="提交表單"/> </form> </body> </html>
通過placeholder屬性規定文字域期望輸入的內容;required屬性只有一個值"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"> tel:<input type="text" placeholder="手機號碼" pattern="^1[3-9]\d{9}$" name="username"> <input type="submit" value="提交表單"/> </form> </body> </html>
pattern屬性值是一段正規表示式,用來限制文字域輸入內容的格式,上面的程式碼使用pattern來規定文字域輸入內容必須是一個手機號碼,否則會報錯。上面的驗證提示並不友好,可以參閱HTML5 pattern自定義驗證提示一文。
[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"> tel:<input type="text" autocomplete="on" autofocus name="username"> <input type="submit" value="提交表單"/> </form> </body> </html>
autofocus只有一個屬性值"autofocus"(可以省略),它規定文字域在頁面載入後自動獲取焦點;autocomplete有兩個屬性值on和off,on規定文字域列出之前已經填寫過的內容,off的功能與之相反。
[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> tel:<input type="text" form="ant" name="username"> </body> </html>
form屬性引用所屬表單的id,於是,雖然文字域在<form>之外,但依然是該表單的一部分。
相關文章
- 單獨設定input text文字框樣式
- input標籤單行文字域type="text"的可以新增屬性以及其描述
- CSS匹配input text文字框CSS
- JavaScript獲取input text文字框JavaScript
- HTML input url域HTML
- HTML input tel 撥號域HTML
- HTML input search搜尋域HTML
- HTML input email郵箱域HTMLAI
- HTML input file檔案域HTML
- HTML input email 郵箱域HTMLAI
- HTML input file 檔案域HTML
- HTML input hidden隱藏域HTML
- HTML input hidden 隱藏域HTML
- 設定input type為text的文字框樣式
- HTML表單中的input標籤HTML
- html input文字輸入框的一些總結HTML
- HTML中設定input等文字框為不可操作HTML
- HTML input radio 單選按鈕HTML
- HTML input radio單選按鈕HTML
- input text 的事件及方法事件
- HTML input rangeHTML
- HTML中input type="text"和type="password" 顯示的長度不一樣HTML
- HTML input 元素概述HTML
- HTML input date calendarHTML
- HTML5--表單標籤input新增type值HTML
- text/html和text/plain的區別HTMLAI
- read_text讀取採購單專案文字
- SVG <text>繪製文字SVG
- CSS 文字裝飾 text-decoration & text-emphasisCSS
- HTML input image按鈕HTML
- HTML input image 按鈕HTML
- HTML input button按鈕HTML
- HTML input button 按鈕HTML
- HTML input submit 按鈕HTMLMIT
- HTML 25 - Input AttributesHTML
- javascript input文字框新增提示文字效果JavaScript
- CSS input文字框樣式CSS
- CSS input 文字框樣式CSS