"tel"类型的元素 用于让用户输入电话号码。与和不同，在提交表单之前，输入值不会被自动验证为特定的格式 - 这是因为电话号码的格式在世界各地变化很大。

不支持类型的浏览器会"tel"回退为标准"text"输入。

值

一个DOMString可以采取两个值之一：

1. 一个空字符串（“”），表示用户没有输入值或者该值已被删除。

1. 代表电话号码的字符串。

使用tel输入

电话号码是网上一种非常常见的数据类型 - 例如，如果您正在创建任何类型的注册或电子商务网站，您可能需要一个紧急联系人的电话号码。电话号码的问题在于，正如我们之前所说，世界各地有许多不同的电话号码格式，这就是为什么输入类型tel不会自动验证。提供“一刀切”解决方案是非常困难的，但我们将在“示例”部分中看一些想法。

注意：如果您愿意，可以添加验证，稍后我们将在“验证”部分中看到。

自定义键盘

输入类型的主要优点之一tel是，它使移动浏览器显示一个更方便的键盘输入电话号码。例如，以下是从Firefox for Android中取得的：

一个简单的电话输入

在最基本的形式中，电话输入可以这样实现：

这里没有什么不可思议的事情发生。当提交给服务器时，上面输入的数据将被表示为telNo=330-4400-6789。

占位符Placeholders

有时，提供关于输入数据应该采取何种形式的上下文提示是有帮助的。如果页面设计不为每个页面提供描述性标签，这可能对于每一个来说尤其重要。于是有了占位符。占位符是演示的形式的值value应采取通过呈现一个有效的值，这被显示在编辑框内部时，该元件的一个例子value是""。一旦数据输入框中，占位符消失; 如果该框被清空，占位符重新出现。

在这里，我们有"tel"占位符的输入"123-4567-8901"。请注意占位符在编辑字段的内容时如何消失并重新出现。

控制输入大小

您不仅可以控制输入框的物理长度，还可以控制输入文本自身允许的最小和最大长度。

物理输入元素大小

输入框的物理尺寸可以使用size属性进行控制。有了它，您可以指定输入框一次可以显示的字符数。在这个例子中，例如，tel编辑框的宽度为20个字符：

元素值的长度

size是独立于所输入的电话号码的长度的限制。您可以使用minlength属性为输入的电话号码指定最小字符长度; 同样，maxlength用来设置输入的电话号码的最大长度。

下面的示例创建一个20个字符的电话号码输入框，要求内容不少于9个字符且不超过14个字符。

注意：上述属性确实会影响验证 - 如果值的长度小于9个字符，或者大于14个字符，上述示例的输入将被视为无效。大多数浏览器甚至不会让您输入超过最大长度的值。

提供默认选项

通常，您可以为通过value属性来为输入框提供默认值：

提供建议值

再往前走一步，您可以提供一个默认选项列表，用户可以通过指定该list属性来进行选择。这不会限制用户使用这些选项，但可以让他们更快地选择常用的电话号码。这也提供了一些提示autocomplete。该list属性指定一个元素的ID，该元素依次包含每个建议值的一个元素; 每个option的value是电话号码输入框对应的建议值。

使用元素及，浏览器将提供指定的值作为电子邮件地址的潜在值; 这通常以包含建议的弹出菜单或下拉菜单的形式呈现。

虽然具体的用户体验可能因浏览器而异，但通常在编辑框中单击可显示建议电子邮件地址的下拉列表。然后，当用户键入时，该列表被调整以仅显示过滤的匹配值。每个输入的字符都会缩小列表直到用户进行选择或输入自定义值。

验证

正如我们之前谈到的那样 - 为电话号码提供一种通用的客户端验证解决方案相当困难。所以，我们能做些什么？

重要说明：HTML表单验证不能取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

要求输入电话号码

您可以这样做，使空输入无效，并不会使用该required属性提交给服务器。例如，让我们使用这个HTML：

 
 Enter a telephone number (required):    
 
 Submit 

让我们包含下面的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;}input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px;}

输出如下所示：

格式验证

如果要进一步限制输入的数字以使其必须符合指定的模式才是有效的，则可以使用该pattern属性，该属性将输入值必须匹配的正则表达式作为其值。

在这个例子中，我们将使用相同的CSS，但是我们的HTML将如下所示：

 
 Enter a telephone number (accepted format xxx-xxx-xxxx):    
 
 Submit 

请注意，除非使用xxx-xxx-xxxx模式，否则输入被报告为无效。这显然只对某些语言环境有用 - 在实际的应用程序中，您可能必须根据用户的区域设置更改所使用的模式。

例子

在这个例子中，我们给出一个简单的界面，一个元素允许用户选择他们所在的国家和一组元素，允许他们输入他们的电话号码的每个部分 -没有理由为什么你不能有多个tel输入。