HTML Form浅析之表单属性

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

type属性

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

语法：type="类型"

             //文本框

         //密码框

            //单选框

         //复选框

           //隐藏域

           //按钮

            //图形按钮

            //重置按钮

           //提交按钮

             //选择文件
                    

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

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

name属性

语法：name="标识名称"

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

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

value属性

语法：value="值"

        
         男
                    

每一个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 试试。

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

        

        Hello, Vic.Wang

        Hi Vic
                    

除了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属性与或配合使用。

使用范围：radio、checkbox。

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

disabled属性

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

使用范围：input、textarea、button

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

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

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

readonly属性

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

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

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

使用范围：input、textarea

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

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

placeholder属性

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

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

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

maxlength属性

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

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

pattern属性

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

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

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

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

required属性

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

required属性是 HTML5 新增的属性。

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

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

form属性

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

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

其他属性：

除了上面介绍的属性外，还有很多属性，有的不常用，有的可以通过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

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