<input type="tel">
型別為tel的<input>元素用於允許使用者輸入和編輯電話號碼。與<input type="email">和<input type="url">不同，在提交表單之前，輸入值不會自動驗證為特定格式，因為全球各地電話號碼的格式差異很大。
試一試
儘管型別為tel的輸入在功能上與標準的text輸入相同，但它們確實具有實用價值；其中最明顯的用途是移動瀏覽器（尤其是在手機上）可能會選擇顯示一個針對電話號碼輸入最佳化的自定義鍵盤。為電話號碼使用特定的輸入型別還可以使新增自定義驗證和處理電話號碼更加方便。
注意：不支援型別tel的瀏覽器將回退為標準的<input type="text">輸入。
值
<input>元素的<input#value>屬性包含一個字串，該字串表示電話號碼或為空字串（""）。
其他屬性
除了適用於所有<input>元素（無論其型別如何）的屬性外，電話號碼輸入還支援以下屬性。
list
list 屬性的值是同一文件中<datalist>元素的<id>。<datalist>提供一個預定義值的列表，以建議使用者為此輸入使用。列表中與<type>不相容的任何值都不會包含在建議選項中。提供的這些值是建議，不是強制要求：使用者可以選擇此預定義列表中的值，也可以提供其他值。
maxlength
使用者可以在電話號碼欄位中輸入的最大字串長度（以 UTF-16 程式碼單元計量）。這必須是 0 或更高的整數值。如果未指定maxlength或指定了無效值，則電話號碼欄位沒有最大長度。此值還必須大於或等於minlength的值。
如果輸入到欄位中的文字長度超過maxlength UTF-16 程式碼單元，則輸入將無法透過<constraint validation>。僅當用戶更改值時才會應用約束驗證。
minlength
使用者可以在電話號碼欄位中輸入的最小字串長度（以 UTF-16 程式碼單元計量）。這必須是非負整數值，且小於或等於maxlength指定的值。如果未指定minlength或指定了無效值，則電話號碼輸入沒有最小長度。
如果輸入到欄位中的文字長度少於minlength UTF-16 程式碼單元，則電話號碼欄位將無法透過<constraint validation>。僅當用戶更改值時才會應用約束驗證。
pattern
如果指定了pattern屬性，則它是一個正則表示式，輸入的<value>必須與該正則表示式匹配，才能透過<constraint validation>。它必須是有效的 JavaScript 正則表示式，與<RegExp>型別使用的正則表示式相同，並在我們的<正則表示式指南>中進行了說明；編譯正則表示式時會指定'u'標誌，以便將模式視為 Unicode 程式碼點的序列，而不是<ASCII>。模式文本週圍不應指定正斜槓。
如果未指定或指定了無效的模式，則不會應用任何正則表示式，並且此屬性將完全被忽略。
注意：使用<title>屬性指定大多數瀏覽器將顯示為工具提示的文字，以解釋匹配模式的要求。您還應該在附近包含其他解釋性文字。
有關詳細資訊和示例，請參閱下面的<模式驗證>。
placeholder
placeholder屬性是一個字串，它向用戶簡要提示該欄位需要哪種資訊。它應該是一個單詞或短語，用於演示預期的資料型別，而不是解釋性訊息。文字不得包含回車符或換行符。
如果控制元件的內容具有一個方向性（<LTR>或<RTL>），但需要以相反的方向性顯示佔位符，則可以使用 Unicode 雙向演算法格式化字元來覆蓋佔位符中的方向性；有關更多資訊，請參閱<如何使用 Unicode 控制字元進行雙向文字>。
注意： 儘可能避免使用placeholder屬性。它在語義上不如其他解釋表單的方式有用，並且可能導致內容出現意外的技術問題。有關更多資訊，請參閱<input>標籤。
readonly
一個布林屬性，如果存在，則表示此欄位不能由使用者編輯。但是，它的value仍然可以透過JavaScript程式碼直接設定HTMLInputElement的value屬性來更改。
注意： 由於只讀欄位不能有值，因此required對也指定了readonly屬性的輸入沒有任何影響。
size
非標準屬性
以下非標準屬性可用於電話號碼輸入欄位。作為一般規則，除非無法避免，否則應避免使用它們。
autocorrect
使用電話輸入
電話號碼是在網路上非常普遍收集的一種資料型別。例如，在建立任何型別的註冊或電子商務網站時，您可能都需要詢問使用者電話號碼，無論出於業務目的還是緊急聯絡目的。鑑於電話號碼輸入的普遍性，不幸的是，沒有一個“一勞永逸”的解決方案可以用於驗證電話號碼。
幸運的是，您可以考慮您自己網站的要求並自行實現適當級別的驗證。有關詳細資訊，請參閱下面的驗證。
自定義鍵盤
<input type="tel">的主要優勢之一是它會導致移動瀏覽器顯示一個特殊的鍵盤來輸入電話號碼。例如，以下是幾個裝置上的鍵盤外觀。
| Firefox for Android | WebKit iOS (Safari/Chrome/Firefox) |
|---|---|
|
|
一個簡單的tel輸入
在最基本的形式中，tel輸入可以這樣實現
<label for="telNo">Phone number:</label>
<input id="telNo" name="telNo" type="tel" />
這裡沒有任何神奇的操作。當提交到伺服器時，上面輸入的資料將表示為，例如，telNo=+12125553151。
佔位符
有時提供一個上下文提示以說明輸入資料應採用什麼形式非常有用。如果頁面設計沒有為每個<input>提供描述性標籤，這尤其重要。這就是佔位符的用武之地。佔位符是一個值，它透過顯示有效值的示例來演示value應採用的形式，當元素的value為""時，它會顯示在編輯框內。一旦在框中輸入資料，佔位符就會消失；如果清空該框，佔位符將重新出現。
這裡，我們有一個帶有佔位符123-4567-8901的tel輸入。請注意，當您操作編輯欄位的內容時，佔位符是如何消失和重新出現的。
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
控制輸入大小
您可以不僅控制輸入框的物理長度，還可以控制輸入文字本身的最小和最大允許長度。
物理輸入元素大小
可以使用size屬性控制輸入框的物理大小。使用它，您可以指定輸入框一次可以顯示多少個字元。例如，在此示例中，tel編輯框寬20個字元
<input id="telNo" name="telNo" type="tel" size="20" />
元素值長度
size與輸入電話號碼的長度限制是分開的。您可以使用minlength屬性指定輸入電話號碼的最小長度（以字元為單位）；類似地，使用maxlength設定輸入電話號碼的最大長度。
以下示例建立了一個20個字元寬的電話號碼輸入框，要求內容不少於9個字元，不多於14個字元。
<input
id="telNo"
name="telNo"
type="tel"
size="20"
minlength="9"
maxlength="14" />
注意： 上述屬性確實會影響驗證——如果值的長度小於9個字元或大於14個字元，則上述示例的輸入將被視為無效。大多數瀏覽器甚至不允許您輸入超過最大長度的值。
提供預設選項
使用value屬性提供單個預設值
與往常一樣，您可以透過設定tel輸入框的value屬性來為其提供預設值
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
提供建議值
更進一步，您可以提供一個使用者可以從中選擇的預設電話號碼值列表。為此，請使用list屬性。這不會限制使用者只能選擇這些選項，但確實允許他們更快地選擇常用的電話號碼。這也為autocomplete提供提示。list屬性指定<datalist>元素的ID，而<datalist>元素又包含每個建議值的<option>元素；每個option的value是電話號碼輸入框對應的建議值。
<label for="telNo">Phone number: </label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />
<datalist id="defaultTels">
<option value="111-1111-1111"></option>
<option value="122-2222-2222"></option>
<option value="333-3333-3333"></option>
<option value="344-4444-4444"></option>
</datalist>
有了<datalist>元素及其<option>，瀏覽器將提供指定的作為電話號碼的潛在值；這通常以包含建議的彈出視窗或下拉選單的形式呈現。雖然特定使用者體驗可能因瀏覽器而異，但通常點選編輯框會顯示建議電話號碼的下拉列表。然後，當用戶鍵入時，列表將調整為僅顯示過濾後的匹配值。每個鍵入的字元都會縮小列表範圍，直到使用者進行選擇或鍵入自定義值。
以下是它可能看起來的樣子截圖
驗證
正如我們之前所討論的，為電話號碼提供一個一勞永逸的客戶端驗證解決方案非常困難。那麼我們能做什麼呢？讓我們考慮一些選項。
警告： HTML表單驗證不是伺服器端指令碼的替代品，這些指令碼在允許資料進入資料庫之前確保輸入的資料格式正確。對於某人來說，調整HTML以允許他們繞過驗證或完全刪除驗證，這太容易了。某人也可以完全繞過您的HTML並將資料直接提交到您的伺服器。如果您的伺服器端程式碼未能驗證它接收到的資料，則當格式不正確的（或太大、型別錯誤等）資料輸入到您的資料庫時，可能會發生災難。
使電話號碼成為必填項
您可以使用required屬性，使空輸入無效，並且不會提交到伺服器。例如，讓我們使用以下HTML
<form>
<div>
<label for="telNo">Enter a telephone number (required): </label>
<input id="telNo" name="telNo" type="tel" required />
<span class="validity"></span>
</div>
<div>
<button>Submit</button>
</div>
</form>
並且讓我們包含以下CSS以使用複選標記突出顯示有效條目，並使用叉號突出顯示無效條目
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
color: #8b0000;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
color: #009000;
}
輸出如下所示
模式驗證
如果您想進一步限制輸入的數字，以便它們也必須符合特定模式，則可以使用pattern屬性，該屬性將其值作為正則表示式，輸入的值必須與之匹配。
在此示例中，我們將使用與之前相同的CSS，但我們的HTML更改為如下所示
<form>
<div>
<label for="telNo">
Enter a telephone number (in the form xxx-xxx-xxxx):
</label>
<input
id="telNo"
name="telNo"
type="tel"
required
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
<span class="validity"></span>
</div>
<div>
<button>Submit</button>
</div>
</form>
請注意，除非匹配模式xxx-xxx-xxxx，否則輸入的值將被報告為無效；例如，41-323-421將不被接受。800-MDN-ROCKS也不會被接受。但是，865-555-6502將被接受。這種特定的模式顯然僅對某些地區有用——在實際應用程式中，您可能需要根據使用者的地區更改使用的模式。
示例
在此示例中，我們提供了一個簡單的介面，其中包含一個<select>元素，允許使用者選擇他們所在的國家/地區，以及一組<input type="tel">元素，允許他們輸入電話號碼的每個部分；沒有理由為什麼您不能有多個tel輸入。
每個輸入都有一個placeholder屬性，向有視力障礙的使用者提示應輸入的內容，一個pattern屬性，用於強制執行所需部分的特定字元數，以及一個aria-label屬性，用於包含提示以向螢幕閱讀器使用者朗讀應輸入的內容。
<form>
<div>
<label for="country">Choose your country:</label>
<select id="country" name="country">
<option>UK</option>
<option selected>US</option>
<option>Germany</option>
</select>
</div>
<div>
<p>Enter your telephone number:</p>
<span class="areaDiv">
<input
id="areaNo"
name="areaNo"
type="tel"
required
placeholder="Area code"
pattern="[0-9]{3}"
aria-label="Area code" />
<span class="validity"></span>
</span>
<span class="number1Div">
<input
id="number1"
name="number1"
type="tel"
required
placeholder="First part"
pattern="[0-9]{3}"
aria-label="First part of number" />
<span class="validity"></span>
</span>
<span class="number2Div">
<input
id="number2"
name="number2"
type="tel"
required
placeholder="Second part"
pattern="[0-9]{4}"
aria-label="Second part of number" />
<span class="validity"></span>
</span>
</div>
<div>
<button>Submit</button>
</div>
</form>
JavaScript相對簡單——它包含一個onchange事件處理程式，當<select>值更改時，它會更新<input>元素的pattern、placeholder和aria-label以適合該國家/地區的電話號碼格式。
const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");
selectElem.onchange = () => {
for (let i = 0; i < inputElems.length; i++) {
inputElems[i].value = "";
}
if (selectElem.value === "US") {
inputElems[2].parentNode.style.display = "inline";
inputElems[0].placeholder = "Area code";
inputElems[0].pattern = "[0-9]{3}";
inputElems[1].placeholder = "First part";
inputElems[1].pattern = "[0-9]{3}";
inputElems[1].setAttribute("aria-label", "First part of number");
inputElems[2].placeholder = "Second part";
inputElems[2].pattern = "[0-9]{4}";
inputElems[2].setAttribute("aria-label", "Second part of number");
} else if (selectElem.value === "UK") {
inputElems[2].parentNode.style.display = "none";
inputElems[0].placeholder = "Area code";
inputElems[0].pattern = "[0-9]{3,6}";
inputElems[1].placeholder = "Local number";
inputElems[1].pattern = "[0-9]{4,8}";
inputElems[1].setAttribute("aria-label", "Local number");
} else if (selectElem.value === "Germany") {
inputElems[2].parentNode.style.display = "inline";
inputElems[0].placeholder = "Area code";
inputElems[0].pattern = "[0-9]{3,5}";
inputElems[1].placeholder = "First part";
inputElems[1].pattern = "[0-9]{2,4}";
inputElems[1].setAttribute("aria-label", "First part of number");
inputElems[2].placeholder = "Second part";
inputElems[2].pattern = "[0-9]{4}";
inputElems[2].setAttribute("aria-label", "Second part of number");
}
};
示例如下所示
這是一個有趣的想法，它展示瞭解決處理國際電話號碼問題的潛在方案。當然，您需要擴充套件示例以提供可能每個國家/地區的正確模式，這將是一項繁重的工作，並且仍然無法保證使用者會正確輸入他們的號碼。
這讓人不禁懷疑，當您只需讓使用者以任何他們想要的格式在客戶端輸入他們的號碼，然後在伺服器端驗證和清理它時，是否值得在客戶端花費如此多的精力。但這個選擇由您決定。
技術總結
| 值 | 表示電話號碼的字串，或者為空 | |
| 事件 |
change和input |
|
| 支援的常用屬性 |
autocomplete、list、maxlength、minlength、pattern、placeholder、readonly和size |
|
| IDL 屬性 |
list、selectionStart、selectionEnd、selectionDirection和value |
|
| DOM 介面 | ||
| 方法 |
select()、setRangeText()、setSelectionRange() |
|
| 隱式 ARIA 角色 | 沒有list屬性：textbox |
有list屬性：combobox |
規範
| 規範 |
|---|
| HTML 標準 # telephone-state-(type=tel) |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入