HTML input text單行文字域

admin發表於2019-09-20
HTML

<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>之外，但依然是該表單的一部分。

相關文章