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

电子邮件是互联网上的一种工具,我们可以使用电子邮件地址向他人发送正式电子邮件。有很多电子邮件服务提供商,如 Yahoo、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="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>

最后,让我们讨论模式属性,使用该属性我们可以限制输入仅特定域的电子邮件地址。它不会接受其他域的电子邮件地址。

示例

<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地址。

以上就是如何在HTML中使用电子邮件输入类型?的详细内容,更多请关注双恒网络其它相关文章!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

云资源网 » 如何在HTML中使用电子邮件输入类型?

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
你们有qq群吗怎么加入?
当然有的,如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。
  • 会员数(个)
  • 12310资源数(个)
  •        
  • 资源(G)
  •        
  • 今日下载
  • 1505稳定运行(天)

提供最优质的资源集合

立即查看 了解详情