如何使用 HTML5 在表单中添加电话号码?

html5web developmentfront end technology更新于 2025/3/21 9:48:17

本文中，我们将使用 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>

当执行上述代码时，它将生成一个输出，该输出由一个表单和一个输入字段组成，用于输入手机号码，该输入字段必须在我们提交表单之前填写，否则当用户尝试提交时，它会弹出一条消息。