输入电子邮件正确格式_HTML5的“电子邮件”和“ URL”输入类型

最新推荐文章于 2022-10-02 18:07:20 发布
最新推荐文章于 2022-10-02 18:07:20 发布
阅读量1.8k 收藏
点赞数
文章标签： java python 大数据 js vue ViewUI
原文链接：https://davidwalsh.name/html5-email
版权

输入电子邮件正确格式

I've already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage.  Today I want to introduce a few new INPUT element types:  email and url.  Let's take a very basic look at these new INPUT types and discuss their advantages.

我已经介绍了HTML5的一些细微改进，例如占位符 ， 预取和Web存储 。 今天，我想介绍一些新的INPUT元素类型：电子邮件和url。 让我们非常基本地了解这些新的INPUT类型并讨论它们的优点。

语法 (The Syntax)

The syntax is as basic as a text input;  instead, you set the type to "email" or "url":

语法和文本输入一样基本。 而是将类型设置为“电子邮件”或“ URL”： 


<!-- email -->
<input type="email" pattern="[^ @]*@[^ @]*" value="">

<!-- url -->
<input type="url" value="">

Using the new HTML5 pattern attribute, you can also provide a regular expression to validate the email  and URL addresses against.  I'll save those specifics for another post.

使用新HTML5模式属性，您还可以提供正则表达式来验证电子邮件和URL地址。 我将这些细节保存在另一篇文章中。

使用type =“ email”和type =“ url”的优点 (The Advantages to Using type="email" and type="url")

There are a few advantages to using these special INPUT types:

使用这些特殊的INPUT类型有一些优点：

  • You may easily style all email INPUT elements with input[type=email]

    您可以使用input [type = email]轻松设置所有电子邮件INPUT元素的样式。
  • You may easily style all url INPUT elements with input[type=url]

    您可以使用input [type = url]轻松设置所有url INPUT元素的样式
  • This INPUT type could be considered more semantically correct.

    可以认为此INPUT类型在语义上更正确。

  • Mobile accessibility:  if your user is browsing with an iPhone and they arrive at a special email input, the iPhone will display a keyboard with the @ symbol provided on the primary screen.  If the INPUT is of type "url", the iPhone will display the ".com" button on the primary keyboard screen:

    HTML5 INPUT

    移动辅助功能：如果您的用户正在使用iPhone浏览，并且收到特殊的电子邮件输入，则iPhone将在主屏幕上显示带有@符号的键盘。 如果输入的类型为“ url”，则iPhone将在主键盘屏幕上显示“ .com”按钮：

在此...输入...类型上输入 (Input on this...Input...Type)

At first I disliked the idea of using different type attribute values per field but after more thought, the accessibility and usability enhancements provided a great boost.  What do you think?

最初，我不喜欢每个字段使用不同类型属性值的想法，但经过更多思考，可访问性和可用性增强功能带来了极大的推动。 你怎么看？

翻译自: https://davidwalsh.name/html5-email

输入电子邮件正确格式

culuo8053
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
注意注意！ html5新增的input类型大总结
sxtweb的博客
09-02 337
文章背景 ​ 1.在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码 ​ 2.以上的不足都已经在html5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便 电子邮件类型< input type=“email” /> 功能就是输入E-mail地址的文本框 注意：输入的内容中必须包含“@”,"@"后面必须具有内容 代码示例： < body> ​ &l
html邮箱input,<input type="email">
weixin_35081955的博客
06-27 1826
If you need the entered email address to be restricted further than just "any string that looks like an email address," you can use the pattern attribute to specify a regular expression the value must...
HTML5 input 类型： email及url
weixin_33834137的博客
08-13 402
原文地址： HTML5′s “email” and “url” Input Types 原文日期： 2010年09月15日 翻译日期： 2013年08月13日 在前面的博文,我们已经讨论了一些HTML5改进的地方，比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url。让我们跟着代码来看看他...
html邮箱代码怎么写_网络资讯：电子邮箱格式怎么写
weixin_39569894的博客
11-09 623
今天来说一下电子邮箱格式怎么写这方面的一些讯息，不少朋友对电子邮箱格式怎么写这方面的一些讯息颇感兴趣的，小编今天就整理了一些信息，希望对有需要的朋友有所帮助。一个完整的电子邮箱地址均由用户名和主机名两个部分组成，格式下：用户名@主机名.域名。中间用符号“@”(at)分开，左边为登录用户名，右边是完整的主机名，它由主机名与域名组成。一个完整的电子邮箱地址均由用户名和主机名两个部分组成，格式下：用户名...
HTML5新控件 - email类型输入框（电子邮件地址）
热门推荐
u014063717的博客
03-17 1万+
如果需要一个用来填写电子邮件地址的输入框，可以使用email类型。这样浏览器可以帮我们验证格式是否正确，而不需要自己写验证规则。1，只允许输入单个邮件地址<input type="email"/>2，允许输入多个邮件地址（用逗号分隔）<input type="email" multiple/>（注：如果不允许未空的话，记得加上required属性）原文出自：www.hangge.com 转载请保留
十四种不同类型的input字段文字输入效果
11-24
3. **email**：用于验证用户输入是否为有效的电子邮件地址格式，浏览器会提供内置的自动完成功能。 4. **url**：检查输入是否符合URL格式，确保用户输入的是有效的网站链接。 5. **number**：用于数字输入，可以...
html5-input样式
02-27
例如，`email`类型会检查输入是否符合电子邮件地址的标准格式。 2. **占位符（Placeholder）**：`placeholder`属性为输入框提供了一个提示文本，当用户未输入任何内容时显示。这是一种简洁的方式来引导用户了解应...
html5客户端表单验证
03-28
1. `<input type="email">`: 用于输入电子邮件地址，浏览器会自动检测格式是否正确。 2. `<input type="url">`: 用于输入网址，验证输入是否符合URL格式。 3. `<input type="tel">`: 用于输入电话号码，虽然不进行...
HTML格式转PDF格式全部
02-04
5. **abcPDF7**：这个工具提供了一种编程方式来实现HTML到PDF的转换，支持多种格式的输入，包括HTML字符串、URL、XML以及DOM对象。它使用WebKit渲染引擎，以确保生成的PDF准确反映HTML源码。 6. **使用abcPDF7进行...
HTML5学习总结一.pdf
11-24
1. `<input type="email">`：用于输入电子邮件地址，浏览器会自动进行格式验证。 2. `<input type="password">`：密码输入框，字符显示为星号或圆点。 3. `<input type="tel">`：电话号码输入，通常在移动设备上会...
HTML5移动开发中的input输入框类型
weixin_30443075的博客
10-06 203
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中，通过这些新的输入框类型来显示定制后的键盘布局，用户体验更好，更容易填写各种表单 本文中，实测手机为肾4S与米4 数字类型number 定义input类型为type="number"时，iOS显示数字、标点及符号键盘，Android显示拨号键盘。代码如下所示 <input type="number" ...
HTML5 的Input 类型
Kill_paradise的博客
07-30 1999
HTML5 的Input 类型 一、文本类 　　Text，文本 　　Url，网络地址 　　Password，密码 　　Email，邮箱地址 二、操作类 　　Checkbox ，复选框 　　Radio，单选框 　　File，上传文件 　　Number，数值 　　Range，百分百滑动条 三、功能类 　　Button，按钮 　　Image，图片提交按钮 　　Submit，文字提交按钮 　　Reset，重置表单 四、Date类 　　Date，年月日控件 　　...
HTML5 input类型
bzzb_的博客
04-09 1402
​ 在Web应用开发过程中,表单是页面上非常重要的一项内容,用户可以输入的大部分内容都是在表单中完成的,客户端与服务器端的交互在大多数情况下也是通过表单完成. HTML5之前版本 支持的少数input输入类型: 文本域:<input type="text"> 定义单行输入字段,用于在表单中输入字母 数字等内容.默认宽度为20个字符 单选按钮:<input type="radio...
HTML5表单之Input 类型-email
乱七八糟的
03-28 5313
email类型用于应该包含e-mail地址的输入域。 在提交表单时，会自动验证e-mail域的值。 eg： E-mail: xxxx E-mail: 提示：iphone中的Safari浏览器支持emaiil输入类型，并通过改变触摸屏键盘来配合它（添加@和.com选项）。
如何转换html电邮格式,如何发送HTML格式的电子邮件？
weixin_35716518的博客
05-31 410
烙印99发送html格式电子邮件的最佳方法该代码将在“ Customer.htm ”中 Dealer's Company Name : #DealerCompanyName# 使用System.IO.File.Rea...
HTML5表单输入：搜索，URL和电子邮件
cungui5726的博客
08-17 542
As the new HTML5 semantic container tags are to <div>, so these new form inputs are to the generic <input type=text> element. Having specific elements for search fields, URLs, eMail addres...
html添加邮件地址,从url中提取并添加电子邮件地址到表单字段
weixin_30616309的博客
06-17 507
我试图从URL中将电子邮件地址提取到html表单的电子邮件输入字段。从url中提取并添加电子邮件地址到表单字段var mail = document.querySelector('input#email_address');if (mail) {var t = document.location.href.split('?')[1];if (t) {var params = {};var lst ...
<input type="email">控件的验证
weixin_30617695的博客
05-11 1094
1.type="email"的input输入类型用于表示语义上的e-mail地址输入域，属于html5新增的类型 2.支持html5的浏览器会自动验证email域值的格式合法性。当输入的不是email格式的内容时，在支持html5的浏览器中提交该表单会出个提示说不是合法的email格式，而且还不用自己手动写js验证代码 3.外观上与type="text"的input输入类型没有差异，在手机端会...
html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性
YangLu888
10-02 7978
html表单form的常用标签以及属性和html5的新增属性
用eclipse写html登录网页，输入用户名和密码点击登录，确认正确后进入信息修改界面，错误则返回登录页面，信息和mysql相关联
最新发布
05-25
首先，你需要安装 Eclipse 的 Web 开发插件，如 Eclipse Web Tools Platform (WTP) 插件。然后，你需要创建一个新的动态 Web 项目。在创建项目时，请指定项目名称、目标运行时环境和 Web 根目录。 接下来，你需要创建一个 HTML 登录页面。在 Web 根目录下创建一个名为 "login.html" 的文件，并添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h1>Login Page</h1> <form method="post" action="loginServlet"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Login"> </form> </body> </html> ``` 在表单中，我们定义了两个输入字段（用户名和密码），以及一个提交按钮。表单的 "action" 属性指向一个名为 "loginServlet" 的 Servlet。 接下来，你需要创建一个 Java Servlet，用于处理用户的登录请求。在 Eclipse 中，右键单击项目并选择“New -> Servlet”菜单项。在“New Servlet”对话框中，指定 Servlet 名称，URL 映射和包名。 在 Servlet 的 doPost 方法中，你需要获取用户输入的用户名和密码，并进行验证。如果验证成功，则将用户重定向到信息修改页面；否则，将用户重定向回登录页面。 ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String USER = "root"; private static final String PASS = "root"; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); String password = request.getParameter("password"); try { Class.forName(JDBC_DRIVER); Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); PreparedStatement ps = conn.prepareStatement("SELECT * FROM users WHERE username=? AND password=?"); ps.setString(1, username); ps.setString(2, password); ResultSet rs = ps.executeQuery(); if (rs.next()) { response.sendRedirect("modify.html"); } else { response.sendRedirect("login.html"); } rs.close(); ps.close(); conn.close(); } catch (Exception e) { out.println("Exception: " + e.getMessage()); } } } ``` 在 doPost 方法中，我们首先获取用户输入的用户名和密码。然后，我们使用 JDBC API 连接到 MySQL 数据库，并执行一条 SELECT 语句，以检查用户名和密码是否正确。如果验证成功，则将用户重定向到信息修改页面；否则，将用户重定向回登录页面。 最后，你需要创建一个信息修改页面。在 Web 根目录下创建一个名为 "modify.html" 的文件，并添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Modify Page</title> </head> <body> <h1>Modify Page</h1> <form method="post" action="modifyServlet"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Save"> </form> </body> </html> ``` 在表单中，我们定义了两个输入字段（姓名和电子邮件地址），以及一个提交按钮。表单的 "action" 属性指向一个名为 "modifyServlet" 的 Servlet。 现在，你需要创建一个 Java Servlet，用于处理用户的信息修改请求。在 Eclipse 中，右键单击项目并选择“New -> Servlet”菜单项。在“New Servlet”对话框中，指定 Servlet 名称，URL 映射和包名。 在 Servlet 的 doPost 方法中，你需要获取用户输入的姓名和电子邮件地址，并将其保存到 MySQL 数据库中。 ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ModifyServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String USER = "root"; private static final String PASS = "root"; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); String email = request.getParameter("email"); try { Class.forName(JDBC_DRIVER); Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); PreparedStatement ps = conn.prepareStatement("UPDATE users SET name=?, email=? WHERE username=?"); ps.setString(1, name); ps.setString(2, email); ps.setString(3, request.getSession().getAttribute("username")); ps.executeUpdate(); ps.close(); conn.close(); response.sendRedirect("modify.html"); } catch (Exception e) { out.println("Exception: " + e.getMessage()); } } } ``` 在 doPost 方法中，我们首先获取用户输入的姓名和电子邮件地址。然后，我们使用 JDBC API 连接到 MySQL 数据库，并执行一条 UPDATE 语句，以将用户的姓名和电子邮件地址保存到数据库中。最后，我们将用户重定向回信息修改页面。 以上就是用 Eclipse 写 HTML 登录网页，输入用户名和密码点击登录，确认正确后进入信息修改界面，错误则返回登录页面，信息和 MySQL 相关联的完整步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值