HTML5表单元素和表单属性

HTML5表单元素

1、input类型

电子邮件类型

<input type="email"/>

该元素可以自动验证输入的email地址，但是对于email地址的验证仅局限于输入内容中有@符号，而且@符号后面不为空

搜索类型

<input type="search"/>

该元素的作用类似于jQuery UI中的autocomplete方法，可以在输入过程中显示与当前输入内容匹配的结果。同时，在文本框右侧还有一个叉号，用于清除当前输入内容。但是惭愧的是，今天查了半天也没搞明白如何实现下面的搜索结果显示，容当后续补齐。

URL类型

<input type="url"/>

该元素的是用于输入Web站点地址的文本框。基本功能是识别输入字符中的“http://”字符串

电话号码类型

<input type="tel"/>

该元素主要是针对电话号码的输入，能够根据不同设备进行相应调整。但是，目前在PC端的H5页面中并不支持，仅可以在移动端实现效果。

数字类型

<input type="number" min="2" max="10" step="2"/>

该元素只能接收数字值。在文本框的右侧有两个上下按钮，分别实现数值的增减

所以，该元素有三个属性：

min——表示可以接收的最小值

max——表示可以接收的最大值

step——表示值递增或递减的步长，默认为1

范围类型

<input type="range" min="10" max="100" value="50" step="10"/>

该元素可以让用户选择一个范围内的数值

该元素共有四个属性：

min——范围的最小值

max——范围的最大值

step——表示值递增或递减的步长

value——设定初始值

范围类型效果如下：

颜色类型

<input type="color"/>

该元素就是颜色拾取控件

效果如下：

日期类型

<input type="date"/>

该元素用于获取年月日，类似于JQuery UI中的datepicker，但是样式较为单调

2、新表单元素

1、<datalist>元素

类似于select元素，使用list属性预创建一组列表项

<!-- (数据)创建数据内容 -->
<datalist id="mylist">
<option>北京</option>
<option>天津</option>
<option>南京</option>
<option>上海</option>
<option>重庆</option>
</datalist>
<!-- 
(结构)创建页面元素
* list属性 - <datalist>元素的id属性值
-->
<input type="text" list="mylist">

该元素实现了对于网页中数据和结构的分离，即创建内容和显示数据的分离

2、progress元素

进度条，表示一个任务的完成进度

两个属性：

value——表示任务执行的进度

max——任务完成后所达到的值

<progress id="progress" value=0 max=100></progress>

3、meter元素

表示刻度，与<progress>类似，用于显示刻度而非进度

属性：

min、max——表示范围的边界

value——确定测量的值

low、high和opimum——将范围划分为不同的部分和设置最佳位置

<meter min=0 max=100 value=20 low=10 high=90></meter>