`

HTML5 标签Email等 (自动验证格式)

阅读更多

谷歌Chrome浏览器。在Windows的【开始】-->【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:

  谷歌Android:

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"


  苹果iPhone 4:

chrome.exe --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"


  苹果iPad 2:

chrome.exe --user-agent="Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"


  诺基亚N97:

chrome.exe --user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124"

HMTL5里面的type属性中,来选择你验证的类型.

 

1.Email输入框,自动验证Email有效性。

 

<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="get">
E-mail: <input type="email" name="user_email"/><br />
<input type="submit"/>
</form>
</body>
</html>     

  

2.number数字输入,验证正确,可以设置开始结束位。

<!DOCTYPE HTML> <html> <body> <form action="#" method="get"> <input type="number" step="5" min="5" max="20" name="number" value="0"/> <input type="submit"/> </form> </body> </html>


3.URL输入框,可以验证URL输入的有效性。

<form action="#" method="get"> URL: <input type="url" name="user_email"/><br /> <input type="submit"/> </form>

4.Date pickers (date, month, week, time, datetime, datetime-local)选择框,可以选择日期,时间,月,周。

<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="get">
Date: <input type="date" name="user_email"/>
month : <input type="month" name="user_email"/>
week: <input type="week" name="user_email"/>
time: <input type="time" name="user_email"/>
datetime: <input type="datetime" name="user_email"/>
datetime-local : <input type="datetime-local" name="user_email"/>
<input type="submit"/>
</form>
</body>
</html>

 


 

5.datalist输入选择。

 


<!DOCTYPE HTML> <html> <body> <form action="#" method="get"> Webpage: <input type="url" list="url_list" value="fdf" name="user_email"/> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn"/> <option label="Microsoft" value="http://www.microsoft.com"/> </datalist> <input type="submit"/> </form> </body> </html>

 



  


  
分享到:
评论

相关推荐

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...

    HTML5从入门到精通-中文学习教程.docx

    * 输入验证:HTML5的输入类型具有自动验证功能,例如邮箱格式验证等。 * 输入应用场景:HTML5的输入类型广泛应用于表单开发、用户信息收集等领域。 七、HTML5表单元素 * 表单概念:HTML5提供了多种表单元素,例如...

    HTML5表单及其8种验证方法

    1. 新增表单元素:HTML5引入了如`&lt;input type="date"&gt;`, `&lt;input type="email"&gt;`, `&lt;input type="tel"&gt;`等新类型的输入元素,它们为用户提供了更直观的交互方式,同时也便于开发者进行数据格式的控制。 2. 数据绑定...

    HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法

    HTML5新增了`tel`(电话号码验证)、`url`(网址验证)、`email`(电子邮件验证)、`date`(日期验证)、`time`(时间验证)、`number`(数字验证)、`range`(数字范围控制)和`color`(颜色选择器)等类型,它们...

    web前端 input添加属性就可以验证 自动验证工具

    综上所述,"web前端 input添加属性就可以验证 自动验证工具" 提供了一种高效、灵活的前端验证解决方案,通过jQuery等JavaScript库,开发者可以快速构建起一套完整的输入验证机制,提升用户体验,同时减轻服务器端的...

    表单验证验证联系.zip

    - `type="email"`:自动验证输入是否为有效的电子邮件地址格式。 - `type="url"`:验证输入是否为有效的URL。 - `min`和`max`:针对数值类型,设定最小值和最大值。 - `pattern`:使用正则表达式进行自定义验证。 ...

    一款HTML5登陆界面表单提交验证特效.zip

    在HTML5中,新的表单元素如`&lt;input type="email"&gt;`和`&lt;input type="password"&gt;`被引入,用于更精确地定义输入类型,确保用户输入的数据格式正确。例如,在登录界面,邮箱和密码输入框可以分别使用这两种类型,浏览器...

    Form表单验证(服务器控件、HTML控件)

    4. type="email"或"type="tel":HTML5新增的输入类型,可自动验证邮箱地址和电话号码格式。 三、JavaScript验证 JavaScript验证可以在用户提交表单前在客户端进行,提高用户体验。以下是一些基本步骤: 1. 事件...

    html5 css3表单提交输入文本内容表单验证效果

    例如,`&lt;input&gt;`标签新增了多种类型,如`email`、`url`、`tel`、`date`等,它们在浏览器中提供了内置的验证,确保用户输入的数据符合预期格式。例如,`&lt;input type="email"&gt;`会自动检查输入是否为有效的电子邮件地址...

    手机移动端登录login html5模板

    4. **表单增强**:HTML5的表单元素如&lt;input type="email"&gt;、等,提供了更好的输入验证,可以自动检查邮箱格式或密码强度,减少用户输入错误。同时,等新类型让日期选择更加方便。 5. **图形处理**:Canvas和SVG提供...

    js动态修改input输入框的type属性及验证Email

    例如,`email`类型会自动启用浏览器内置的邮箱格式验证。 要动态修改`input`的`type`属性,可以通过JavaScript的`setAttribute`方法实现。下面是一个简单的例子: ```javascript let inputElement = document....

    移动端HTML5登录注册精美界面

    HTML5引入了许多新的标签和API,如`&lt;input&gt;`类型的扩展、`&lt;canvas&gt;`画布、`&lt;video&gt;`视频、`&lt;audio&gt;`音频以及Geolocation地理位置API等,这些都极大地增强了网页的交互性和表现力。在登录注册界面中,例如,`...

    html发送email

    标题“html发送email”涉及到的是使用HTML格式来创建电子邮件的内容,这种技术可以使邮件看起来更加丰富和专业,包括使用各种字体、颜色、图像以及布局。在IT行业中,这通常通过编程语言如Python、PHP或者JavaScript...

    html5网站实例

    HTML5增强了表单处理能力,新增了`&lt;input&gt;`类型的`date`、`email`、`url`、`number`等,提高了输入验证的效率。此外,`&lt;form&gt;`标签中的`required`属性可以确保必填字段,`placeholder`属性则为输入框提供提示文本。 ...

    HTML5登录界面

    例如,`&lt;input&gt;`标签新增了`type="email"`和`type="password"`,分别用于输入邮箱地址和密码,它们会自动进行格式验证,提供更好的用户体验。同时,`autofocus`属性可以使得页面加载时自动聚焦到特定输入框,`...

    html5_user_login.rar_com/html/user.html_html login_登陆 html5

    总结,"html5_user_login.rar"这个压缩包展示了一个完整的HTML5用户登录系统,涵盖了HTML5的新特性,如语义化标签、表单控制、验证功能、Web存储和响应式设计。开发者可以在此基础上进一步完善,增加如记住密码、...

    HTML5 木纹登录框特效,带验证提示.rar

    HTML5引入了表单输入类型如`email`、`password`等,以及`required`属性,可以实现客户端验证,即在用户提交表单前验证输入内容的合法性,减少无效请求,提高用户体验。此外,`pattern`属性允许定义正则表达式,用于...

    HTML5入门(css3+js api+html新标签)

    HTML5 引入了多个新的表单输入类型,提高了输入控制和验证的能力,例如: - **Email**: `&lt;input type="email" name="user_email" /&gt;` - **URL**: `&lt;input type="url" name="user_url" /&gt;` - **Number**: `...

    HTML5新特性1

    视频格式:HTML5 Video标签支持多种视频格式,包括MP4、WebM、Ogg等。 HTML5 Audio标签(音频): HTML5提供了播放音频文件的标准。 语法: 晴天.mp3" type="audio/mpeg"&gt; control属性提供添加播放、暂停和音量...

    jump start html5

    HTML5不仅引入了新的输入类型如email、url、number等,还增加了一些有用的表单特性,比如自动聚焦、轮廓绘制以及表单验证提示。 在多媒体方面,HTML5特别加强了对音频和视频的支持。它允许开发者无需第三方插件,如...

Global site tag (gtag.js) - Google Analytics