如何在 HTML 中使用电子邮件输入类型?

front end technologyhtmlweb development更新于 2025/4/1 13:32:17

电子邮件是互联网上的一项功能，我们可以通过电子邮件地址向他人发送正式电子邮件。市面上有许多电子邮件服务提供商，例如 Yahoo、Gmail、Hotmail 等。我们需要在这些服务提供商处注册才能获得自己所需的电子邮件地址。电子邮件地址由两部分组成:用户名和域名。用户名可以包含大小写字母、数字、特殊字符和句点。用户名的最大长度为 64 个字符，域名的最大长度为 253 个字符。用户名和域名始终以"@"符号分隔。我们在很多地方输入电子邮件 ID，您一定注意到，网页始终接受有效的地址。

在 HTML 表单中，我们创建了"email"类型的单行输入控件。一旦使用 mail 类型，它将自动检查电子邮件地址的有效性。电子邮件地址验证非常重要，否则用户也可能会输入错误的电子邮件地址。虽然它不会检查整个电子邮件地址，但它只会检查 @ 和 TLD 后缀，即顶级域名。

让我们了解如何在 HTML 中使用电子邮件。

示例


<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

在此程序中，如果用户输入的电子邮件地址格式不正确，则会显示错误消息。

我们还可以使电子邮件控件接受多个电子邮件地址。例如，在撰写电子邮件时，我们可以在"收件人"、"抄送"和"密送"字段中输入多个地址。因此，如果您也想制作一个允许输入多个电子邮件地址的控件，则可以使用 MULTIPLE 属性。

示例

让我们看一个例子来阐明这个概念。


<html>
<body>
   <form name="form1">
      <table>
         <tr>
            <td>
               <label for="to">To </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="cc">Cc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="bcc">Bcc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td></td><td>
               <textarea rows="10" cols="50">
               </textarea></td>
         </tr>
         <tr>
            <td></td>
            <td>
            <input type="submit" value="Submit"></td>
         </tr>
      </table>
   </form>
</body>
</html>

在"收件人"、"抄送"或"密送"字段中，我们可以使用逗号 (,) 输入多个收件人的电子邮件地址。

假设您的网站需要限制电子邮件地址中可输入的字符数，那么请在 <input> 标签中使用 MINLENGTH 和 MAXLENGTH 属性。MINLENGTH 指定电子邮件地址可以接受的最小字符数，而 MAXLENGTH 则限制电子邮件地址中的最大字符数。

示例


<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" minlength="15" maxlength="25">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

输入内容不能超出限制，一旦超出限制，光标将无法继续输入。

设置电子邮件控件的默认值，这意味着电子邮件文本字段中将显示默认的电子邮件 ID，而不是空白文本字段(使用 VALUE 属性)。您也可以使用 REQUIRED 属性将其设置为必填字段。

示例


<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" value="abc@gmail.com" required>
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

如果留空，则会显示错误。

假设网站需要显示电子邮件地址的输入格式，以便用户能够轻松以正确的格式输入。为此，可以创建占位符。

示例


<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" placeholder="abc@gmail.com">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

最后，我们来讨论一下 pattern 属性，通过该属性我们可以限制只能输入特定域名的电子邮件地址。其他域名的电子邮件地址将不会被接受。

示例


<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" pattern=".+@gmail\.com"><br>
          
      <input type="submit" value="Submit">
   </form>
</body>
</html>