- 用于让用户输入和编辑电话号码。不同于<input type="email"> 和 <input type="url"> , 在提交表格之前,输入值不会被自动验证为特定格式,因为世界各地的电话号码格式差别很大。
- 尽管 tel 类型的输入在功能上和 text 输入一致,但它们确实有用; 其中最明显的就是移动浏览器,特别是在手机上,可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便
属性 |
说明 |
value |
包含一个文本表示一个电话号码或者一个空字符串 |
size |
控制输入框的物理大小,使用它,你可以指定输入框一次可显示的字符数 |
minlength |
设置输入电话号码的最小长度 |
maxlength |
设置输入电话号码的最大长度 |
required |
设置必填 |
示例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <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> </body>
</html> |
浏览器运行结果如下:
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/tel>