HTML5验证以及日期显示的实现详解


Posted in HTML / CSS onJuly 05, 2013

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

复制代码
代码如下:

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

<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>
HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 #HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 #HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 #HTML / CSS
You might like
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php通过session防url攻击方法
2014/12/10 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
javascript事件模型代码
2007/07/01 Javascript
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
作风建设整改方案
2014/10/27 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
护理工作心得体会
2016/01/22 职场文书