如何在HTML中使用电子邮件输入类型？-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 pm 01:52 PM

如何在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>

在“收件人”或“抄送”或“密件抄送”字段中，我们可以使用逗号（,）输入多个收件人的电子邮件地址

假设在您的网站上，您想要对电子邮件地址的字符数量设置限制，那么可以使用标签中的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中使用电子邮件输入类型？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles