南强小屋 Design By 杰米
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>
复制代码代码如下:
<!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>
标签：
HTML5,验证,日期显示
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无HTML5验证以及日期显示的实现详解的评论...