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

八角枫叶红了

八角枫叶红了

2016-02-19 10:37

下面图老师小编跟大家分享HTML5验证以及日期显示的实现详解,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~
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"/
/datalistinput type="submit"/
/form
/body
/html
展开更多 50%)
分享

猜你喜欢

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

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

HTML5上传文件显示进度的实现代码

Web开发
HTML5上传文件显示进度的实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

html5拖曳操作 HTML5实现网页元素的拖放操作

Web开发
html5拖曳操作 HTML5实现网页元素的拖放操作

HTML5中如何显示视频呢 HTML5视频播放demo

Web开发
HTML5中如何显示视频呢 HTML5视频播放demo

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

详解HTML5创意画板的设计教程

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详解HTML5创意画板的设计教程

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

Web开发
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML5 Canvas渐进填充与透明实现图像的Mask效果

HTML5 Canvas渐进填充与透明实现图像的Mask效果

常用正则 常用的C#正则表达式

常用正则 常用的C#正则表达式
下拉加载更多内容 ↓