数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML5 在表单中添加电话号码？
本文将要执行的任务是使用 HTML5 在表单中添加电话号码。我们知道使用电话号码的众多好处。如果您需要收集用户的个人信息，电话号码至关重要。此外，用户可能会在表单服务上收到许多消息或通知。
让我们深入本文，以便更好地了解如何使用 HTML5 在表单中添加电话号码。这可以通过使用 <input type="tel"> 来实现。
使用 <input> 标签
可以使用类型为“tel”的 <input> 元素输入和编辑电话号码。与 <input type="email"> 和 <input type="url"> 不同，在提交表单之前，不会自动将输入值检查为特定格式，因为全球电话号码格式差异很大。
语法
以下是 <input type = "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>
当以上代码执行时，它将生成一个包含表单的输出，以及一个输入手机号码的输入字段，在提交表单之前必须填写此字段，否则当用户尝试提交时，将弹出消息。
更新于: 2023年9月8日
697 次查看
广告