04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

一、input新增类型

1.tel输入类型用于应该包含电话号码的输入字段

 

2.url用于应该包含 URL 地址的输入字段 - 提交表单时对 url 字段的值自动进行验证

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

<form action="/test.html" method="post">

url:<input type="url" name="user_url" /><input type="submit" />

</form>

 

注意要带ftp:// http:// https:// 等等的前缀头才可以

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

3.email用于 e-mail 地址的文本字段

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

<form action="/test.html" method="post">

email:<input type="email" name="user_email" /><input type="submit" />

</form>

 

 

4.number输入类型用于包含数字值的输入字段 - 可以设置可接受数字的限制

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

<form action="/test.html" method="post">

number:<input type="number" name="user_number" min="1" max="10" /><input type="submit" />

</form>

 

 

5.search:用于搜索字段,比如站内搜索或谷歌搜索等 - 搜索字段的外观与常规的文本字段无异

<input type="search" />

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

6.color 定义拾色器。

 

7.range输入类型用于应该包含指定范围值的输入字段 - range 类型显示为滑块

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

8.日期检出器类型

HTML5拥有多个可供选则日期和时间的新型文本输入框

date定义日期字段

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

接受结果

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

month定义日期字段的月

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

接受结果

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

week定义日期字段的周

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

接受结果

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

time:定义日期字段的时、分、秒

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

接受结果

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

datetime定义日期字段

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

 

datetime-local定义日期字段

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

接受结果

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

大纲图:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

二、input新增属性

 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

三、form新增类型和属性:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

附录:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

火狐表现:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

IE表现:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

谷歌表现:

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

 

上一篇:07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置


下一篇:阿里云服务器架设javaweb网站全攻略