今天终于认识到了HTML5的form标签，一个字“牛”。这次HTML5新的输入框类型让我们在以后的验证，可以少写了js的脚本的。一一认识一下吧！

==========================新的输入类型============================

1、email地址

<form action=""  method="get">

<input type="email" name="lsj-email">

<input type="submit" name="GO">

</form>

对于不支持email的浏览器在这就不要一一列举出来的，似乎每一个浏览器都支持的，只是每一个浏览器对email渲染是不同的效果。建议使用opera浏览器，因为他支持的比较优秀的。

目前许多的web表单都是采用<input type="text">这种纯文本输入框来作为email地址的输入框，通过javascript的脚本来进行email的验证。现在HTML5标准里面新添了这么一个输入类型，那么怎么算浏览器支持type=“email”呢？其实没有根本的标准

现在看一张iPhone上面的浏览器对email的支持的时，她的键盘的体现了“@”，“.”。很不错的用户体验。

2、web地址--url

网址：相关互联网标准中定义了网址的语法格式。也就是表单要求输入一个网址，那我们肯定输入的是http://www.yiqifa.com。/和.是很常见的符号，而且不允许有空格。

<form  action=""  method="get">

<input type="url" name="lsj-url">

<input type="submit" name="GO">

</form>

针对url这个输入框的标签，iphone同样在它的屏幕浏览器上面提供了".com"\".""/"，真是很不错的用户体验。对于不支持的url的浏览器来说会以type=“text”来处理的。

3、数字类型输入框 number

记得以前需要用户输入一个数字的时候，我们需要用javascript脚本来验证用户输入的是数字或是在允许的范围内的。这次HTML5也定义了这么number一个输入类型的。

<form action="" method="get">

<input type="number" name="lsj-number" min="0" max="10" step="2" value="2">

<input type="submit" name="Go">

</form>

在number这个新的数字类型中有四个属性，min 最小值，max最大值，step。这样能保证总能获取到有效的数字值：当输入框中的值达到了所设的最大值时，数字选择器中“向上”的小箭头就会变成灰色不可用状态。

4、数字类型输入框：滑块

<form action="" method="get">

<input type="range" name="lsj-range" min=1 max=10 step=1 value=5>

<input type="submit" name="GO">

</form>

这个与number其实是一样的，不同的是表现的形式不同而已。type=“range”的浏览器会将其渲染成一个滑块而不是输入框的。

5、日期选择器

<form action="" method="get">

<input type="date" name="lsj-date">

<input type="submit" name="GO">

</form>

 

<form action="" method="get">

<input type="month" name="lsj-date">

<input type="submit" name="GO">

</form>

 

<form action="" method="get">

<input type="week" name="lsj-date">

<input type="submit" name="GO">

</form>

 

<form action="" method="get">

<input type="time" name="lsj-date">

<input type="submit" name="GO">

</form>

 

<form action="" method="get">

<input type="datetime" name="lsj-date">

<input type="submit" name="GO">

</form>

 

<form action="" method="get">

<input type="datetime-local" name="lsj-date">

<input type="submit" name="GO">

</form>

在opera上面操作一下，可以看出很好的效果。

5、颜色选择器

<form action="" method="get">

<input type="color" name="lsj-color">

<input type="submit" name=GO>

</form>

超级喜欢在opera上面对这个标签的类型的渲染，很漂亮的。对于没有不支持这个标签的浏览器是以text默许的。

6、搜索框

<form>

<input name="q" type="search">

<input type="submit" name="Find">

</form>

这个标签在各个浏览器似乎没有进行任何的渲染的。

***这里有一个很大的特点就是name的显示，每一次submit中显示的都是中文字的。**

通过以上的各个type的类型的值，可以发现之前有javascript脚本实现的，现在都被定义成了标签，内容和属性的。这样提高的是页面的加载的效率。

==========================新增的表单属性============================

1、placeholder属性

 这是一个很实用的属性，不需在用js去实现点击清除表单初始值。

<input placeholder="点击我会以清除">

2、require/pattern属性

<form action="" method="get">

<input name="lsj-require" required="required">

<input type=submit name=GO>

</form>

<input name=required>

<input name="lsj-required" pattern="^[1-9]\d{5}$">

表单验证属性，require类型时，若输入值为空，则拒绝提交，并会有一个提示。上面两种写法都对，这个很有用。

3、autofocus属性

 默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus().

<input autofocus="true">

4、list属性

<input list="lsj-list">
<datalist id="lsj-list">
 <option label="a" value="a"></option>
 <option label="b" value="b"></option>
 <option label="c" value="c"></option>
</datalist>

该属性需要与datalist属性公用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。

4、max/min/step属性

<input type=range max="100" min="1" step="20">

限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.

5、autocomplete属性

<input autocomplete="on">

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

 ------------------------------------------------------------------------------------------------------

发现HTML5把一些验证的信息，放在了属性和标签里面了，不至于我们在用javascript来验证的。可以让javascript更好的偏向计算这方面的。