请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 228|回复: 5

HTML5验证以及日期显示的实现详解_html5教程技巧

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-18 23:03:43 | 显示全部楼层 |阅读模式

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>

回复

使用道具 举报

0

主题

941

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2016-3-7 20:58:00 | 显示全部楼层
学习贵在坚持哦
回复 支持 反对

使用道具 举报

3

主题

1042

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2016-3-16 19:00:56 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

1

主题

1111

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2016-12-21 14:28:04 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

1

主题

1110

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2017-3-27 13:53:08 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

0

主题

1021

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2019-1-4 14:02:22 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-1-20 02:34 , Processed in 0.777291 second(s), 33 queries .

快速回复 返回顶部 返回列表