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属性实现炫酷读者墙效果
Jan 08 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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中使用Oracle数据库(3)
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
Python解决八皇后问题示例
2018/04/22 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
高三励志标语
2014/06/05 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Python简易开发之制作计算器
2022/04/28 Python