HTML中的表单

HTML5为用户添加了很多新的表单类型，下面为大家整理一下：

input的type属性拥有更多的值：

• button：无缺省行为按钮。

• checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。

• color：HTML5 用于指定颜色的控件。

• date：HTML5 用于输入日期的控件（年，月，日，不包括时间）。

• datetime：HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。

• datetime-local：HTML5 用于输入日期时间控件，不包含时区。

• email：HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。

• file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。

• hidden：不显示在页面上的控件，但它的值会被提交到服务器。

• image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

• month：HTML5 用于输入年月的控件，不带时区。

• number: HTML5 用于输入浮点数的控件。

• password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。

• radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。

• range：HTML5 用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值：

  1. min：0

  2. max：100

  3. value：min + (max-min)/2，或当 max 小于 min 时使用 min

  4. step：1

• reset：用于将表单所内容设置为缺省值的按钮。

• search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

• submit：用于提交表单的按钮。

• tel：HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。

• text：单行字段；换行会将自动从输入的值中移除。

• time：HTML5 用于输入不含时区的时间控件。

• url：HTML5 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。

• week：HTML5 用于输入一个由星期-年组成的日期，日期不包括时区。

input元素页拥有了一些新的属性：

• placeholder:

placeholder 特性作用于 <input> 与 <textarea> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

• autofocus:

autofocus 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 <input>， <button>， <select>，与 <textarea> 元素。例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。

html对于表单元素的约束验证：

• <input>, <select>， 和 <textarea> 元素上的 required 特性，指定必须提供该元素的值。(在 <input> 元素上， required 只能与特定的 type 特性值结合起来生效。)

• <input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。

• <input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。

• <input> 元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。

• <input> 与 <textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。

• type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。

此外，若要阻止对表单进行约束验证，你可以在 <form> 上设置 novalidate 特性，或在 <button> 与 <input> 元素(当 type 是 submit 或 image)上设置 formnovalidate 特性。这些特性指定了当表单提交时不做验证。