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 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
jquery自定义函数的多种方法
2014/01/09 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
JS数组中对象去重操作示例
2019/06/04 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
党校培训自我鉴定
2014/02/01 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android