Home / Blog / it

HTML Form浅析之表单属性

Author: Vic.Wang 2014/06/19 Tags:htmlformattribute表单表单属性

今天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 试试。

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

        

        

        
                    

除了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

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