4.1 HTML5对表单的改进

HTML5的一个重要特性就是对表单的改进。在HTML5中，表单在兼容原有元素的基础上，又增加了多个新的表单元素。HTML5WebForms2.0是对目前Web表单的全面提升，它在保持了简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。HTML5主要在以下几个方面对目前的Web表单做了改进。

1.HTML结构更加自由

XHTML中需要放在form之中的如input/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。

＜formid="form0"action="http：//www.baidu.com"＞＜/form＞

＜input type="search"form="form0"name="kw"＞

2.新增控件类型

（1）Email/URL类型

＜input type="email"name="email"＞＜/input＞

＜input type="url"name="url"＞＜/input＞

Email控件效果如图4-1所示，URL控件效果如图4-2所示。

图4-1 Email控件

图4-2 URL控件

必须输入正确的email/url地址，表单才能正常提交。省去了之前版本中需要通过脚本语言才可以实现的数据验证。

（2）search

＜input type="search"results="s"＞＜/input＞

此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。在浏览器中预览，效果如图4-3所示。

图4-3 search控件

（3）number/range

不同的数字输入模式，显示不同的效果如图4-4、图4-5所示。

＜input type="number"＞

＜input type="range"＞

图4-4 number控件

图4-5 range控件

（4）color

＜input type="color"＞

color类型可让用户通过颜色选择器选择一个颜色值，并反馈到value中，如图4-6所示。

图4-6 color控件

（5）日期和时间选择器Datepickers（date，month，week，time，datetime，datetime-local）

HTML5提供多种日期和时间输入类型：

●date:选取年、月、日，不包括时间

●month:选取年和月（不带时区）

●week:选取年和周（不带时区）

●time:选取时间（小时和分钟，不带时区）

●datetime:选取年、月、日、时间（基于UTC时区）

●datetime-local:选取年、月、日、时间（不带时区）

示例代码如下：

＜input type="date"name="user_date"＞

＜input type="month"name="user_month"＞

＜input type="week"name="user_week"＞

＜input type="datetime"name="user_datetime"＞

＜input type="datetime-local"name="user_datetime"＞

目前，Firefox浏览器（版本号46.0.1）不支持上述日期选择控件，Chrome浏览器（版本号51.0.2704.106）支持大部分上述日期选择控件，请读者自行选择在不同的浏览器中预览上述代码。

3.新增表单属性

（1）placeholder

该属性可以在用户输入时进行提示，placeholder属性适用于以下类型的＜input＞标签：text、search、url、telephone、email以及password。

＜input type="text"placeholder="请输入姓名信息"＞＜/input＞

＜input type="text"placeholder="请输入姓名信息"＞

在浏览器中预览，效果如图4-7所示。

（2）require/pattern

require属性表示元素为必填项，当用户提交表单时系统会自动检查元素中是否有内容，省去了开发人员编写程序检验的过程。required属性适用于以下类型的＜input＞标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio以及file。

图4-7 placeholder属性

pattern属性规定用于验证输入字段的模式，即正则表达式，开发人员无须再写JavaScript脚本绑定正则表达式进行验证了，非常方便。pattern属性适用于以下＜input＞类型：text、search、url、telephone、email以及password。

＜input type="text"autofocus="true"required="true"＞

＜input type="text"required＞

在浏览器中预览，不填写内容直接单击“提交”按钮，文本框会自动红色高亮，并提示用户“请填写此字段”，效果如图4-8所示。

（3）autofocus

autofocus属性表示在打开页面时使元素自动获得焦点（即鼠标光标）。

＜input type="text"autofocus="true"＞＜/input＞

＜input type="text"autofocus＞

在浏览器中预览，效果如图4-9所示。

图4-8 require属性

图4-9 autofocus属性

（4）list

list属性与datalist元素配合使用，用来规定输入域的datalist。datalist是输入域的选项列表，该元素类似select元素，但是比select元素更好的一点在于，当用户要设定的值不在选择列表内时，允许自行输入，该元素本身不显示，当文本框获得焦点时以提示输入的方式显示。

list属性适用于以下＜input＞标签：text、search、url、telephone、email、datepickers、numbers、range以及color。

在Firefox浏览器中预览，双击文本框会弹出下拉列表选项，效果如图4-10所示。Chrome浏览器能更好地支持list属性，文本框获取焦点时，右侧会显示下拉箭头提示，请读者自行尝试在Chrome中预览此例。

图4-10 list属性