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去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
node跨域请求方法小结
2017/08/25 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python 实现try重新执行
2019/12/21 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2014年创卫工作总结
2014/11/24 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
python manim实现排序算法动画示例
2022/08/14 Python