您的位置：首页 > Web前端 > HTML5

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

2013-07-05 15:06 627 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航