HTML input tel 撥號域

admin發表於2019-01-15
HTML

將<input>標籤的type屬性值設定為tel即可建立撥號域，HTML5新增。

既然叫做撥號域，那麼它主要用於填寫電話號碼等類似資料。

首先看一段程式碼例項：

[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="tel" name="tel"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

撥號域在PC端的表現與普通文字框無異，在移動端有很大差別。

在移動端，焦點位於撥號域，會彈出一個數字撥號皮膚，供撥號使用，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/103600fo2ctonl56zc2k25.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也就是說撥號域的價值主要體現在移動端，撥號域還具有其他屬性，分別如下：

（1）.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：規定撥號域為只讀。

（12）.disabled：規定撥號域為不可用狀態。

上述屬性的功能與其他域重合，具體參閱HTML input search搜尋域一章節。

相關文章