html5新增表单类型及属性

前言

HTML5相对于html4 而言，新增了很多新的特性。增添了一些语义化标签，还有新增的一些表单类型和属性。今天就着重罗列一下表单新增的这些类型。

新增input类型

• color 用户可以从中任意选取一个颜色
  

• date 可以从中选取一个日期
  

• datetime-local 从中选取日期和时间
  

• email 用于应该包含 e-mail 地址的输入域
  

• month 允许选择一个月份。
  

• number 用于应该包含数值的输入域。
  max 和min 可以限定数字的大小

• range 类型用于应该包含一定范围内数字值的输入域。
  显示为滑动条
  

• search 用于搜索域，比如站点搜索
  

• tel 定义输入电话号码
  

• time 选择一个时间
  

• url 定义输入网址
  

• week 选择周和年
  

• file 用于上传文件
  

• image 图片按钮 具有提交功能
  

以下是最终效果图：

新增form元素

• datalist 元素规定输入域的选项列表。
  语法：
  
  list的值是 datalist 的id 名
• output 元素用于不同类型的输出，比如计算或脚本输出

新增form属性

新增form属性
1、autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 on/off
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

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

新增input属性

1、autofocus 属性规定在页面加载时，自动地获得焦点。
2、位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)

3、 formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖 元素中的action属性.
4、formenctype 属性覆盖 form 元素的 method属性。
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的 method 属性。
注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

5、novalidate属性描述了 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 元素的novalidate属性
6、formtarget 属性指定表单提交方式
formtarget 属性覆盖 元素的target属性. formtarget=“_blank” 提交到一个新的页面
7、height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
8、list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
list值是datalist 的id名
9、min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
min、max 和 step 属性适用于以下类型的 标签：date 、number 以及 range。
Step：输入域的合法数字间隔

10、multiple 属性规定 元素中可选择多个值。
multiple 属性适用于以下类型的 标签：email 和 file:（上传文件）
11、pattern 属性描述了一个正则表达式用于验证 元素的值。
pattern 属性适用于以下类型的 标签: text, search, url, tel, email, 和 password.
12、placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
13、required 属性规定必须在提交之前填写输入域（不能为空）。
14、optgroup 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使用optgroup 标签能够很简单的将相关选项组合在一起。