01 HTML5--新特性之表单

---

一.HTML5表单新特性

  (1)新的input type

  (2)新的表单标签

  (3)表单标签的新属性

---

 1.新的input type —— 了解，实用性不强

  <input type="">

  HTML5之前已有的input type(10个)：

text、password、radio、checkbox、file、submit、reset、button、image、hidden

  HTML5新增加的input type：

  (1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

<input type="email">

  (2)url：URL地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

<input type="url">

  (3)number：数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口(可定制内容不能定制样式)

<input type="number" min="" max="" step="" value="">            //step是步长，每点一次增加几

  (4)search：搜索输入域，在手机浏览器中右下角呈现搜索按键（平常的是回车）

<input type="search">

  (5)range：范围选择控件，帮助用户在一定范围内选择一个数字

<input type="range" min="" max="" step="">

  (6)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

<input type="color">

 (7)Date pickers (date, month, week, time, datetime, datetime-local)

---

2.HTML5新特性之表单新特性——新的表单元素

  HTML5之前FORM可以有的标签——用于数据提交：

   INPUT、TEXTAREA、SELECT/OPTION、BUTTON

  HTML5新增表单元素——用于信息提示，不能用于数据提交,name属性无意义：

  (1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表，区别于select，select必须从里面选取。（了解而已，因为真正的建议数据来自于服务器）

<datalist id="l"><option>XXX</option></datalist>

<input type="text" list="l" >

(2)keygen :是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥;目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

(3) output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。

<output>xxx</output>

---

 

 

3.HTML5新特性表单新特性——表单元素新的属性——重点

  HTML5之前表单元素可用的属性：

   id、class、title、style、type、name、value、checked、selected、disabled、readonly

  HTML5之前表单元素新增的属性<form>和<input>的：

  (1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议<form>属性

<input autocomplete="off">

  (2)placeholder：占位符，用于在输入框中显示提示性文字（灰色），与value不同(黑色)，placeholder不能被提交

<input placeholder="提示性文字">

  (3)autofocus：自动获得输入焦点

<input autofocus="autofocus">//只有一个

  (4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email或者file）就允许输入用逗号分隔的多个值

<input type="email" multiple>

  (5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部

<form id="f"></form>

<input form="f">

  ========上述五个属性是新的通用属性===========

  =======上述六个属性是输入验证相关属性========

  (6)required：必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息

<input required="required">

  (7)min：限定输入的数字的最小值;max：限定输入的数字的最大值;step：限定输入的数字的步长，与min属性连用

适用于以下类型的 <input> 标签：date pickers、number 以及 range。

<input min="10" max="0" step="3">

  (8)pattern：指定一个正则表达式，对输入进行验证

<input pattern="1[3578]\d{9}">

注意：上述正则表达式可以省略^和$

(9)height和width:用于img大小的更改

(10)dorm overrides重写属性  常用于创建不同的提交按钮

(11)list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

(12)novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

---

8.如何定制表单2.0中的错误提示消息内容——难点&掌握

  HTML5为每个标签对应的JS对象添加了新属性，以标识用户输入的有效性：

  input.validity {  

badInput：false，无效的输入，如email输入无效

typeMismatch：false，类型不匹配，如number中出现字符

valueMissing：false，值缺失，如required验证失败

tooLong：false，输入的内容超过maxlength限制

tooShort：false，输入的内容不满足minlength限制

rangeOverflow：false，输入的数字超过max

rangeUnderflow：false，输入的数字不满足min

stepMismatch：false，步长不匹配

patternMismatch：false，正则表达式不匹配

customError：false，是否存在自定义错误

valid：true，输入值是否有效

  }

  注意：

  (1)最后的validity.valid属性，只有其它属性都为false（没有任何错误），valid值为true；否则只要任何一个其它属性为true（说明有某方面的错误），valild值为false。

  (2)上述属性的值会随着输入域中值的改变而立即改变，无需等到表单提交。

  (3)使用input.setCustomValidity('XXX')可以生成一个自定义错误消息，使得validity.customError属性变为true；若执行input.setCustomValidity('')可以删除自定义错误消息，使得validity.customError属性变为false

  (4)自定义错误消息的优先级高于任何系统自带的错误消息优先级。