了解HTML表单之input元素的30个元素属性_html/css_WEB-ITnose
name type accept alt checked disabled readonly maxlength size src value
新增属性autocomplete autofocus novalidate height width list min max step multiple pattern placeholder required form formaction formenctype formmethod formnovalidate formtarget
前面的话
form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素
accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性
传统属性
name
name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据
[注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值
type
type属性用来规定input元素的类型
[注意]如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type="text"
accept
accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型
[注意]该属性只能与type="file"配合使用
alt
alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息
[注意]alt属性只能与type="image"的input元素配合使用
checked
checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置
[注意]checked属性只能与type="radio"或type="checkbox"的input元素配合使用
disabled
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本
[注意1]disabled属性无法与type="hidden"的input元素一起使用
[注意2]对于IE7-浏览器必须设置为disabled="disabled",而不可以直接设置disabled,否则使用javascript控制时将失效
readonly
readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本
readonly属性可与type="text"或"password"的input元素配合使用
[注意]IE7-浏览器不支持使用javascript控制readonly属性
maxlength
maxlength属性规定输入字段的最大长度,以字符个数计
[注意]该属性只能与type="text"或type="password"的input元素配合使用
size
size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度
[注意]由于size属性是一个可视化的设计属性,推荐使用CSS来代替它
src
src属性作为提交按钮显示的图像的URL
[注意]src属性只能且必须与type="image"的input元素配合使用
value
value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:
type="button"、"reset"、"submit"用于定义按钮上的显示的文本
type="text"、"password"、"hidden"用于定义输入字段的初始值
type="checkbox"、"radio"、"image"用于定义与输入相关联的值
[注意1]type="checkbox"或"radio"必须设置value属性
[注意2]value属性无法与type="file"的input元素一起使用
新增属性
autocomplete
autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项
autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
详细情况移步至此
autofocus
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素
novalidate
novalidate属性规定在提交表单时不验证form或input域
novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器不支持
详细情况移步至此
height
height属性用于规定image类型的input标签的图像高度
[注意]该属性只适用于image类型的input标签
width
width属性用于规定image类型的input标签的图像宽度
[注意]该属性只适用于image类型的input标签
//http://127.0.0.1/form.html?test=123&x=38&y=57#
list
大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据
list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器及safari浏览器不支持
详细情况移步至此
min
min属性规定输入域所允许的最大值
max
max属性规定输入域所允许的最小值
step
step属性为输入域规定合法的数字间隔
min、max、step属性适用于以下类型的input元素:date pickers、number、range
multiple
multiple属性规定按住ctrl按键,输入字段可以选择多个值
该属性适用于type="email"和"file"的input元素
[注意]该属性IE9-浏览器不支持
pattern
pattern属性规定用于验证input域的模式。模型pattern是正则表达式
pattern属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器及safari浏览器不支持
placeholder
placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器不支持
required
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
[注意]IE9-浏览器及safari浏览器不支持
form
form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id
form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
表单重写属性
表单重写属性允许重写form元素的某些属性设定。其中,formnovalidate适用于button或input元素,而其他属性适用于submit或reset的button或input元素
formaction
重写表单的action属性
关于action的详细信息移步至此
formenctype
重写表单的enctype属性
关于enctype的详细信息移步至此
formmethod
重写表单的method属性
关于method的详细信息移步至此
formnovalidate
重写表单的novalidate属性
关于novalidate的详细信息移步至此
formtarget
重写表单的target属性
关于target的详细信息移步至此
推荐阅读
-
HTML5新增的表单元素和属性实例解析
-
HTML5初探——新增的表单元素和属性
-
HTML5实战与剖析之媒体元素(2、媒体元素的属性)
-
HTML5的表单input元素的新属性
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
表单元素之搭车系_html/css_WEB-ITnose
-
读取页面元素的onclick属性值 禁止重定向 获取url重定向后Location头指定的重定向目标_html/css_WEB-ITnose
-
CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小_html/css_WEB-ITnose
-
表单元素的值可以为布尔型吗?_html/css_WEB-ITnose
-
表单元素之搭车系_html/css_WEB-ITnose