HTML5 如何将电话号码添加到表单中

HTML5 中有一个新的输入类型 tel，它是为了让用户输入电话号码而设计的。使用 tel 类型的表单元素，浏览器会为它自动添加电话号码输入框，并在移动设备上弹出电话键盘。

基本使用方法

将 <input> 元素的 type 属性设置为 tel，就可以将其转换为电话号码输入框。

<label for="phone">电话号码：</label>
<input type="tel" id="phone" name="phone">

在表单中增加上述代码后，用户即可在页面上看到一个电话号码输入框。当用户点击输入框时，浏览器会根据当前设备的类型弹出相应的电话输入键盘。

验证输入内容

为了保证用户输入的是有效的电话号码，可以使用 HTML5 提供的表单验证特性。在输入框中加入 pattern 属性，并设置正则表达式，就可以限制输入的内容符合特定的格式。

<label for="phone">电话号码：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{8}">

上述代码所设置的规则是电话号码格式为“xxx-xxxxxxxx”，即 3 位区号，8 位号码。如果用户输入的不符合该规则，表单提交时会提示错误信息。

处理表单提交

与其他类型的表单元素类似，电话号码输入框的值可以通过表单提交来获取。

<form>
  <label for="phone">电话号码：</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{8}">
  <button>提交</button>
</form>

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交
  const phone = document.querySelector('#phone').value;
  console.log('电话号码为：', phone);
  // 处理表单提交
});

在表单提交时，使用 preventDefault() 方法阻止默认提交并获取电话号码输入框的值。之后就可以对获取到的电话号码进行相应的处理了。

总之，使用 tel 类型的表单元素能够让用户在移动设备上更方便地输入电话号码，并通过 HTML5 提供的验证特性进行校验，为用户提供更好的输入体验。