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

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

电子邮件是互联网上的一种工具,我们可以使用电子邮件地址向他人发送正式电子邮件。有很多电子邮件服务提供商,如 Yahoo、Gmail、Hotmail 等。我们需要向这些服务提供商注册,以便获得自己选择的电子邮件地址。电子邮件地址由两部分组成——用户名和域名。用户名可以由大写或小写字母、数字、特殊字符和点组成。用户名的最大长度最多为 64 个字符,域名的最大长度为 253 个字符。用户名和域名始终用“@”符号分隔。我们在很多地方输入电子邮件 ID,您一定已经观察到网页始终接受有效地址。

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

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

示例

                     

在这个程序中,如果用户没有输入正确的电子邮件地址格式,它将显示错误消息。

立即学习“前端免费学习笔记(深入)”;

我们还可以使我们的电子邮件控件接受多个电子邮件地址。例如,当我们撰写电子邮件时,我们可以在“收件人”、“抄送”和“密送”字段中键入多个地址。因此,如果您还想制作这样一个允许输入多个电子邮件地址的控件,那么您可以使用 MULTIPLE 属性。

示例

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

         

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

假设在您的网站上,您想要对电子邮件地址的字符数量设置限制,那么可以使用标签中的MINLENGTH和MAXLENGTH属性。MINLENGTH将指定电子邮件地址可以接受的最小字符数,而MAXLENGTH将限制电子邮件地址中的最大字符数。

示例

                     

输入内容不能超出限制,一旦超过限制,光标将停止输入。

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

示例

                     

如果留空,将会显示错误。

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

示例

                     

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

示例

               

根据这个程序,只允许使用gmail地址。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551609.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:55:08
下一篇 2025年12月13日 04:48:33

相关推荐

  • 在HTML中定义一个已知范围内的标量测量

    使用 标签定义标量测量。 HTML 标签指定已知范围内的标量测量(量规)。 示例 您可以尝试运行以下代码了解如何在 HTML 中实现 标签 – HTML meter Tag 6 out of 10 gauge value can be seen here 以上就是在HTML中定义一个已知…

    2025年12月21日
    000
  • 如何在jQuery中添加、编辑和删除表格行?

    在当今的 Web 开发时代,有效且高效的表管理变得非常重要,特别是在处理数据量大的 Web 应用程序时。从表中动态添加、编辑和删除行的能力可以显着增强用户体验并使应用程序更具交互性。实现这一目标的一种有效方法是利用 jQuery 的强大功能。 jQuery 提供了许多功能来帮助开发人员执行操作。 表…

    2025年12月21日
    000
  • JavaScript HTML DOM中的nodeName属性是什么?

    JavaScript中的nodeName属性用于指定节点的名称。 示例 您可以尝试运行以下代码来了解如何实现JavaScript 中的 nodeName 属性。 实时演示 Tutorials Demo Content document.getElementById(“id3”).innerHTML …

    2025年12月21日
    000
  • 如何使用HTML5画布将DIV保存为带有扩展名的图像?

    DIV 内容可以借助 JavaScript 中的 html2canvas() 函数保存为图像。 DIV 标签定义 HTML 文档中的一个部分。 示例 Welcome 这显示了名为 cpimg的划分区域。 html2canvas() 函数使用以下代码将 div 保存为图像 – html2c…

    2025年12月21日
    000
  • 如何在JavaScript中使用document.embeds进行工作?

    使用 JavaScript 中的 document.embeds 属性来获取文档中 标签的数量。 示例 您可以尝试运行以下代码以在 JavaScript 中实现 document.embeds 属性。 实时演示 JavaScript Example @@@###@@@ var num = docum…

    2025年12月21日
    000
  • 如何在HTML中显示一个fieldset?

    HTML 标签用于对相关表单元素进行分组并显示字段集。通过使用 fieldset 标签和 legend 标签,您可以使您的表单更易于用户理解。 示例 您可以尝试运行以下代码在 HTML 中显示字段集 – HTML fieldset Tag Details Student ID: Subj…

    2025年12月21日
    000
  • 利用最新的 Twitter API 设计 Twitter 小部件

    twitter 在推出 1.1 版 api 时做出了一些更改。最显着的变化之一是身份验证的引入。也就是说,应用程序需要经过身份验证才能向 api 发送请求。 身份验证由 OAuth 提供支持 – 一种开放协议,允许通过简单且标准的方法进行安全授权,从而允许用户批准申请代表他们行事而不共享…

    2025年12月21日 好文分享
    000
  • 为什么我们不应该使用表格进行HTML布局?

    在本文中,我们将讨论表格布局及其功能。我们将了解为什么表格布局是 HTML 中最少使用的布局,以及为什么在设计网站时不推荐它的布局。 HTML 中的布局指定了网站的基本组织和视觉风格。网站的 HTML 布局可作为如何放置 HTML 元素的指南。它使您能够使用基本 HTML 标签构建网站。 表格布局 …

    2025年12月21日
    000
  • 如何使用HTML5视频标签播放本地(硬盘)视频文件?

    标签用于添加视频,具有以下视频格式 – MP4、WebM 和 Ogg 通过输入元素选择文件。 p> 更改事件被触发 当用户对元素的值进行更改时,、 和 元素的事件将被触发。 p> 获取 File 对象 File 接口提供有关文件的信息,并允许网页中的 JavaScript 访…

    2025年12月21日
    000
  • 在HTML中,当页面卸载时执行脚本?

    unloaded 属性在网页卸载时触发。您可以尝试运行以下代码来实现 HTML 中的 unloaded 属性 – 示例 Tutorialspoint Simply Easy learning function display() { alert(“Bye!”); } 以上就是在HTML中…

    2025年12月21日
    000
  • 使用JavaScript RegExp查找数字

    在本教程中,我们将了解如何使用 JavaScript RegExp 查找数字 (0-9)。数字 [0-9] 的 ASCII 值从 48 到 57 开始。如果要打印某个数字的任何 ASCII 值,需要在该数字上添加 48。 我们在正则表达式中将数字表示为 d。 RegExp 是一个对象,它指定用于对字…

    2025年12月21日
    000
  • 创建自定义标签以扩展 HTML 功能

    在本教程中,我将向您展示使用自定义标签扩展 html 语言是多么容易。自定义标签可用于实现各种行为,因此它们是编写更少代码并使 html 文档更简单的非常方便的方法。 要进一步了解自定义标签,请查看我关于使用 Shadow DOM 创建封装的自定义标签的文章。 什么是自定义 HTML 标记? 例如,…

    2025年12月21日
    000
  • 如何使用HTML创建参考文献?

    参考书目是有关某个主题的书面信息来源的列表。我们在 HTML 中使用 标签来创建参考书目部分。 标签定义某个主题的作品。 标签还用于添加作品标题,例如歌曲、绘画、电影等。它表示引用,标签内的任何内容都代表作品标题。 标记之间的文本以斜体格式呈现。 我们使用 标签列出项目,使用 标签添加主题标题。 立…

    2025年12月21日
    000
  • 在HTML中设置有序列表的起始值?

    使用start属性来设置HTML中有序列表的起始值,即: 在上面添加您想要开始的位置的值。 示例 您可以尝试运行以下代码来实现start属性 – HTML ol Tag Programming Languages Rank Usage:立即学习“前端免费学习笔记(深入)”; Java C…

    2025年12月21日
    000
  • JavaScript中的availHeight属性是什么意思?

    使用screen.availHeight属性来返回用户屏幕的宽度。结果将以像素表示,并且不包括任务栏功能。 示例 您可以尝试运行以下代码来了解如何在JavaScript中使用screen.availHeight属性: 演示 document.write(“Height of the screen: …

    2025年12月21日
    000
  • 我们如何在HTML中添加一个无框架(noframe)部分?

    使用 标签添加 noframe 部分。 HTML 标签用于处理不支持 标签的浏览器。此标记用于显示备用文本消息。 示例 HTML noframes Tag Your browser does not support frames. 以上就是我们如何在HTML中添加一个无框架(noframe)部分?的…

    好文分享 2025年12月21日
    000
  • 在HTML5画布元素上绘制的图像的颜色改变

    为了更改 HTML5 Canvas 元素上绘制的图像的颜色,您可以尝试运行以下代码。使用drawImage()方法 – function display(img1, red, gr, bl) { //func to change color of image var canvas1 = …

    2025年12月21日
    000
  • 当HTML中的媒体数据加载时执行脚本吗?

    使用 onloaddata 事件在加载媒体数据时执行脚本。您可以尝试运行以下代码来实现 onloaddata 事件 – 示例 以下代码在视频加载时生成一个警报框 – Your browser does not support the video element. functi…

    2025年12月21日
    000
  • 全局RegExp属性在JavaScript中的作用是什么?

    全局属性是 RegExp 对象的只读布尔属性。它指定特定的正则表达式是否执行全局匹配,即是否使用“g”属性创建。 示例 您可以尝试运行以下代码来了解如何使用全局 RegExp 属性。 JavaScript RegExp global Property var re = new RegExp( “st…

    2025年12月21日
    000
  • 我们能通过脚本删除HTML5 Canvas标签的“getContext”属性吗?

    HTML5规范中没有说明,脚本删除getContext属性是有效的。 我们可以编写一段代码,删除HTMLCanvasElement的getContext属性,然后在单独的语句中删除我们将其设为未定义。 Delete window.HTMLCanvasElement.prototype.getCont…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信