HTML Form浅析之表单属性
Author: Vic.Wang 2014/06/19
今天East.Wu给我们简单的说了下表单相关的知识,自己结合平时工作稍微整理了下,给大家说说表单的那些事儿,今天就先说表单的一些属性。 ^_^
type属性
type属性控制的是表单控件的类型,主要用在input标签上。
语法:type="类型"
//文本框 //密码框 //单选框 //复选框 //隐藏域 //按钮 //图形按钮 //重置按钮 //提交按钮 //选择文件
在HTML中,表单中的控件都是以
这里我们不细说,具体的翻看另一篇博文《HTML Form浅析之表单控件》。
name属性
语法:name="标识名称"
name属性用来标识数据的key名称,一般是和后端配合的,提交表单时,浏览器会以键值对的形式传给服务器,而键就是name属性定义的,值是value属性的值。要传输数据,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
关于布尔值的属性见另一篇博文
表单提交时,有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 新增的属性,这个属性是在
当输入的内容不合法,提交的时候会出现提示信息。如下图:

使用范围: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
先说这些吧,有时间再说说其他的属性。
本文地址:http://blog.mingsixue.com/it/html-form-attribute.html
文章若需转载,请附上原文链接,谢谢配合。^_^