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

【 tulaoshi.com - Web开发 】

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