HTML5总结系列（二）--新增表单标签及表单属性

1、点击可选择颜色

<input type="color"/>

2、点击选择日期

<!--选择年月日-->
<input type="date"/>
<!--选择年、月、日、时、分-->
<input type="datetime-local"/>
<!--选择年、月-->
<input type="month"/>
<!--选择时、分-->
<input type="time"/>
<!--选择年、第几周-->
<input type="week"/>

3、邮件\电话\链接地址，自带普通正则验证，若需要更精准的验证，可利用pattern属性加入正则表达式实现

<span style="color:#330000;"><input type="email" pattern="..."/> // 邮件</span>

<span style="color:#330000;"><input type="tel" pattern="..."/> // 电话</span>

<span style="color:#330000;"><input type="url" pattern="..."/> // 地址</span>

4、数字\滑块，属性max定义最大数字，min定义最小数字、step定义每次前进步数

<span style="color:#330000;"><input type="number" max=".." min=".." step=".."/> //数字</span>

<span style="color:#330000;"><input type="range" max=".." min=".." step=".."/> //滑块</span>

PS：range可延伸做其他功能，比如音乐播放器音量控制的滑动

5、搜索,框内打入文字框尾自动出现X，点X可消除输入的所有文字

<input type="search"/>

6、datalist，默认看到input输入框，有边框默认有向下的箭头，随着input的变化显示option的选项，，注意：input的list属性对应datalist的 id属性

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

视图：

7、output  不同类型的输出，结合form的oninput属性一起用。

<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">

0 <input type="range" id="a" value="50">100 <span style="font-family: Arial, Helvetica, sans-serif;">+ <input type="number" id="b" value="50">  </span><span style="font-family: Arial, Helvetica, sans-serif;">= <output name="x" for="a b"></output></span>

<span style="white-space:pre"></span><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"></form>

PS：

1）其他常用的一些新的表单属性

autocomplete: 设置自动完成

novalidate:值为boolean值，是否需要验证；

formnovalidate、formaction：保存未完成订单，绕开当前验证；

autofocus:设置自动获取焦点

mutiple 可选择多个值

placeholder：提示；

height：img的高度

width：img的宽度

2）利用CSS3伪类设置无效元素的样式

• ：valid
• ：invalid
• ：in-range
• ：out-of-range
• ：required
• ：optional