如何使用 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 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告