极客笔记如何使用HTML5在表单中添加电话号码？
在本文中，我们将介绍如何使用HTML5在表单中添加电话号码。我们知道使用电话号码的许多好处。如果您需要收集用户的个人信息，电话号码是不可或缺的。此外，用户可能会在表单服务上收到许多消息或通知。
让我们深入了解如何使用HTML5将电话号码添加到表单中。这可以通过使用来实现。
使用标签
可以使用类型为“tel”的元素输入和编辑电话号码。与和不同的是，在提交表单之前，输入值不会自动检查特定的格式，因为电话号码的格式在全球范围内各不相同。
语法
以下是的语法。
<input type="tel">
示例
让我们来看一个简单的例子，我们将创建一个简单的表单，并添加一个电话输入框。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#ABEBC6 ">
<form> FULLNAME: <input type="text" placeholder="Enter your Name" />
<br />
<br /> Mobile.No: <input type="tel" placeholder="Enter Mobile Number" />
<br />
<br />
<button>Submit</button>
</form>
</body>
</html>
在运行上面的代码时，将弹出输出窗口，显示用户可以在表单中输入姓名和手机号码的输入字段，以及网页上的一个点击按钮。
示例
在下面的示例中，我们将创建一个用于注册的表单，并包括添加电话号码和通过指定size=”10″来控制大小。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#CCCCFF ">
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="7">
<br>
<br> Phone.No: <input id="telNo" name="telNo" type="tel" size="10" />
<br>
<br>
<button>Sign Up</button>
</form>
</body>
</html>
当上述代码执行时，它将生成一个输出，其中包含一个表单，该表单提供给用户输入字段，以及网页上的一个点击按钮和一个size=”10″用于控制电话号码的输入。
例子
下面是一个例子，我们将通过允许用户输入一个手机号码并使用min和max属性来创建一个表单。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D2B4DE">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="Lname">Lastname:</label>
<input type="text" id="Lname" name="Lname" minlength="7">
<br>
<br> Mobile.No: <input id="telNo" name="telNo" type="tel" size="26" minlength="10" maxlength="12" />
<br>
<br>
<button>Apply</button>
</form>
</body>
</html>
在运行上述代码时，输出窗口将弹出，在网页上显示表单，并允许用户通过在网页上提供输入字段来输入数据。
示例
考虑以下示例，我们将在所需的表单中输入手机号码并对其进行验证。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D5F5E3">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<div>
<label for="phno">Enter Mobile Number:</label>
<input id="phno" name="phno" type="tel" required />
<span class="validity"></span>
</div>
<div>
<button>Apply</button>
</div>
</form>
</body>
</html>
当上面的代码被执行时，它会生成一个包含一个表单和一个输入字段的输出，用于输入手机号码，在提交表单之前必须填写该字段，否则当用户尝试提交时，会弹出一条消息。