HTML Form浅析之表单属性

今天East.Wu给我们简单的说了下表单相关的知识，自己结合平时工作稍微整理了下，给大家说说表单的那些事儿，今天就先说表单的一些属性。 ^_^

type属性

type 属性控制的是表单控件的类型，主要用在input标签上。

语法：type="类型"

<input type="text" />     //文本框
<input type="password" /> //密码框
<input type="radio" />    //单选框
<input type="checkbox" /> //复选框
<input type="hidden" />   //隐藏域
<input type="button" />   //按钮
<input type="image" />    //图形按钮
<input type="reset" />    //重置按钮
<input type="submit" />   //提交按钮
<input type="file" />     //选择文件

在HTML中，表单中的控件都是以 <input type="">; 来区分，根据 type 属性值的不同显示不用样式的控件。 Web Forms 2.0 标准中引入了一些智能输入控件，像 email、url、number 等。

这里我们不细说，具体的翻看另一篇博文《HTML Form浅析之表单控件》。

name属性

语法：name="标识名称"

<input name="user" />

name 属性用来标识数据的key名称，一般是和后端配合的，提交表单时，浏览器会以键值对的形式传给服务器，而键就是 name 属性定义的，值是 value 属性的值。要传输数据，name 是必须定义的，后端也会通过 name 来获取数据。

顺便提一下，在 W3C 规范中，建议是用 id 来代替 name，但目前主流的浏览器还是以 name 为主。

value属性

语法：value="值"

<input type="text" name="name" value="vic.wang" />
<input type="radio" name="sex" value="1" /> 男

每一个 input 元素都有 value 值。textarea 也是有的。对于 radio 和 checkbox 类型而言，如果没有选中，不会提交 value 值。

autocomplete属性

autocomplete 属性规定表单是否应该启用自动完成功能。该属性有两个值：on 和 off，默认值是 off。属性值为 on 时，用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项。

该属性适用于 form，以及下面的 input 类型：text,  search,  url,  telephone, email,  password, datepickers, range 以及 color。

autofocus属性

autofocus属性规定当页面加载时控件应当自动地获得焦点。

页面加载完后，这个 Web Forms 2.0 扩展会将焦点聚集在有这个属性的元素上。每个页面中只有一个控件可以拥有该属性。当页面上拥有多个该属性时，除了第一个属性所在的元素生效外，其余的都不会生效的。这个属性用处不大，有些浏览器下不支持。

细心的你是不是发现了，刚进入页面的时候焦点会定位在上面的文本框中，不信再 F5 试试。

使用范围：所有可显示的类型。

<input type="text" autofocus />

<textarea autofocus>Hello, Vic.Wang</textarea>

<button autofocus>Hi Vic</button>

除了 input 的 text、password、radio、checkbox、submit、image、reset、file外，HTML5新增的也是可以的，color、date、month、week、email、number、range、search、telephone、url、time、datetime、datetime-local。还有button、select 和 textarea 标签也可以。

checked属性

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

使用范围：radio、checkbox。

<input type="radio" checked />

<input type="checkbox" checked />

<input type="radio" checked="checked" />

在表单中，相同 name 的 radio 或 checkbox 为一组，在单选组中一组控件里面只有一个元素可以有 checked ，而在 checkbox 组可以有多个 checked。提交时选中的元素没有赋值，会自动赋值为 “active” 或 “on”。

disabled属性

disabled属性规定应该禁用表单控件元素。加了这个属性的控件会呈现为灰色，用户无法对其操作，无法获得焦点也无法激活。下面的6种控件就是被禁用状态。

使用范围：input、textarea、button

<input type="text" disabled />

<input type="text" disabled="disabled" />

<input type="button" disabled />

<textarea disabled></textarea />

<button disabled></button>

disabled disabled="true" disabled="disabled"，这些都是表示“true”的，你设置为 disabled="false"，理解上可能是false，但实际上却是true的，因为它是布尔值属性，在元素中出现这个属性，即意味着值为“true”。

关于布尔值的属性见另一篇博文《你所不知道的布尔值属性》。

表单提交时，有 disabled 属性的控件其值不会提交到服务器。如果是提交按钮被禁用，那整个表单不会被提交。这个属性在表单验证和数据不想被用户修改时非常有用。

readonly属性

readonly 属性规定输入字段为只读

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本，该属性可以防止用户对值进行修改。

你会发现上面的控件值是可以选中，但是无法输入。

使用范围：input、textarea

<input type="text" readonly />

这也是个布尔值属性，在元素中出现这个属性，即意味着值为 “true”。

和 disabled 不同之处在于，表单提交时，有 readonly 属性的控件值会被提交到服务器而 disabled 则不会。这在后台操作中，即需要提交数据，又不希望用户修改数据应该会用得到。

placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

使用范围：input 类型的 text、password、url、search、email、telephone。

<input type="text" placeholder="这是提示信息" />

maxlength属性

maxlength 属性规定输入字段的最大长度，以字符个数计。超出规定的长度不能再输入。

上面的例子就只能输入3个字符，多了就输入不了了。

<input type="text" maxlength="3" />

pattern属性

pattern 属性规定用于验证输入字段的正则表达式。在提交表单时才会去验证数据，需要 title 属性来描述验证规则，验证不符合时才显示 title 中的提示，没有则显示浏览器默认提示。

pattern属性是 HTML5 新增的属性，这个属性是在 Web Forms 2.0 扩展的。

当输入的内容不合法，提交的时候会出现提示信息。如下图：

<form>
    <input type="text" pattern="[a-zA-Z0-9]{6}" title="请输入6位字母或数字！" />
    <input type="submit" />
</form>

使用范围：input 类型：text,  search,  url, telephone, email 以及 password 。

required属性

required 属性规定必需在提交之前填写输入字段。如果使用该属性，那么该字段是必填的，且是有效的数据，没有值或者数据不合法将出现提示信息。

required 属性是 HTML5 新增的属性。

没有输入内容提交时，出现如下提示：

<input type="text" required="required" />

使用范围：input类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

form属性

form 属性规定 input 元素属于哪个表单。form 属性的值必须是要属于哪个表单的 id。

form 属性也是 HTML5 新增的属性。

<input type="text" form="form1" />

其他属性：

除了上面介绍的属性外，还有很多属性，有的不常用，有的可以通过CSS来实现。

能通过CSS实现的属性：align、border、width、height、hspace、vspace、size。

不常用的属性：accept（MIME类型）、accesskey、action、alt、datafld、datasrc、dynsrc、enctype、form、inputmode、ismap、list、loop、lowsrc、mxa、min、method、replace、src、start、step、target、template、usemap。

先说这些吧，有时间再说说其他的属性。