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 相关文章推荐
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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 APC的安装与使用详解
2013/06/13 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php数组使用规则分析
2015/02/27 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Javascript this指针
2009/07/30 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
javascript学习之json入门
2016/12/22 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
社区包粽子活动方案
2014/01/21 职场文书
读书之星事迹材料
2014/05/12 职场文书
中药学专业求职信
2014/05/31 职场文书
汽车维修求职信
2014/06/15 职场文书
就业意向书
2014/07/29 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Python max函数中key的用法及原理解析
2021/06/26 Python