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

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

在 HTML 表单中，我们创建类型为“email”的单行输入控件。一旦使用类型邮件，它将自动检查电子邮件地址的有效性。电子邮件地址的验证非常重要，否则用户也可能输入错误的电子邮件地址。虽然它不会检查整个电子邮件地址，但它只检查 @ 和 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="[email protected]" 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="[email protected]">
      <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>

因此，根据此程序，仅允许 gmail 地址。

更新于: 2022-08-23

1K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告