3.HTML5表单

HTML5新增的表单属性

from标记的新属性

1. autocomplete属性

   autocomplete：on|off

   属性规定form标记或类型为text、search、url、tel、email、password、date pickers、range、color的input标记是否具有自动完成的功能

   效果：当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入

2. novalidate属性

   novalidate：true|false

   属性规定在提交表单时不进行验证form或类型为text、search、url、tel、email、password、date pickers、range、color的input标记

input标记的新属性

autocomplete、autofocus、form、form overrides （formaction、formenctype、formmethod、formnovalidate、formtarget）、height、width、list、min、max、step、multiple、pattern（regexp）、placeholder、required

• height 和 width属性

  只适用于image类型的input标记的的图像高度和宽度

• form属性

  规定输入域所属的一个或多个表单。form属性必须引用所属表单的id

• list属性

  规定输入域的datalist。

  list属性适用于text、search、url、tel、email、password、date pickers、range、color的input标记

  鼠标盘旋在输入域上时，并获得焦点后，单击该域会弹出下拉列表选项，简短的提示会显示在输入域上。

• placeholder属性

  提供一种提示，描述输入域所期待的值

• autofocus属性

  在页面加载时，该域会自动获得焦点。

  适用于所有的input标记类型

  设置方法：autofocus=“autofocus” 或 直接使用该属性autofocus

• required属性

  必须在提交之前填写输入域（不能为空）

  适用于text、search、url、tel、email、password、date pickers、number、checkbox、radio、file的input标记

  设置方法：required=“required” 或 直接使用该属性required

• min、max和step属性

  max：输入域内所允许的最大值

  min：输入域内所允许的最小值

  step：为输入域内规定合法的数字间隔（例如：step=“5”，则合法的数为-5、0、5、10等等）

  适用于类型为date pickers、number、range的input标记

• multiple属性

  输入域中课选择多个值

  适用于类型为email、file的input标记

• form overrides 表单重写属性

  • formaction：重写表单的action属性
  • formenctype：重写表单的enctype属性
  • formmethod：重写表单的method属性
  • formnovalidate：重写表单的novalidate属性
  • formtarget：重写表单的target属性

  适用于submit和image的input标记

• pattern属性

  用于验证input域的模式（pattern）

  适用于text、search、url、tel、email、password的input标记

  属性值为正则表达式

HTML5新增的表单元素

HTML5新增output、keygen、datalist等表单元素

标记名称	描述
<output></output>	定义不同类型的输出，如脚本的输出
<keygen></keygen>	用于表单的密钥对生成器字段
<datalist></datalist>	定义选项列表。与input配合使用，来定义input可能的值

1. output标记

   该标记有for、form、name属性

   • for：用于描述计算中使用的元素与计算结果之间的关系，其值为每个元素的id值，多个id值用空格分开
   • form：用于定义输入字段所属的一个或多个表单
   • name：用于定义对象的唯一名称（表单提交时使用）

2. keygen标记

   用来提供一种验证用户的可靠方法。

   当提交表单时，会生成两个键：一个是私钥，一个是公钥。

   私钥存储于客户端，公钥则会被发送到服务端。

   公钥可用于之后验证用户的客户端证书。

3. datalist标记

   用来规定input标记可能的选项列表。

   一般使用input标记的list属性来绑定datalist元素

HTML5新增的input类型

input——Data Pickers（日期选择器）

1. data——选取日、月、年
2. month——选取月、年
3. week——选取周和年
4. time——选取时间（小时和分钟）
5. datetime——选取时间、日、月、年（UTC时间）
6. datetime-local——选取时间、日、月、年（本地时间）

示例：

<fieldset>
        <legend align="center">新生报到须知</legend>
        开学日期: <input type="date"><br>
        开学周：<input type="week"><br>
        开学月：<input type="month"><br>
        交费时间：<input type="time"><br>
        日期与时间：<input type="datetime"><br>
        本地日期与时间：<input type="datetime-local">
</fieldset>

input类型：color

<input type="color"> 
从拾取器拾取颜色

input类型：tel

<input type="tel">

定义输入电话号码字段

input类型：email

用于包含e-mail地址的输入域。

在提交表单时，会自动验证email域的值是否合法有效

input类型：number

用于包含数值的输入域

属性	说明
disabled	输入字段禁用
max	最大值
maxlength	字段的最大字符长度
min	最小值
patten	验证输入字段的模式
readonly	只读
required	输入字段的值是必需的
size	字段可见字符数
step	输入字段的合法数字间隔
value	默认值

input类型：range

用于包含一定范围内数字值的输入域

range类型显示为滑动条

input类型：search

用于搜索域，例如站点搜索或Google搜索

input类型：url

用于包含URL地址的输入域

在提交表单时，会自动验证url域的值