最常用的表单控件input元素的30个元素属性

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元素配合使用

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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元素一起使用

1
2

新增属性

autocomplete

autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项

autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

    
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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-浏览器不支持

要修改placeholder的颜色需要使用::placeholder

::placeholder{color:green;}

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属性

First name: 

Last name: 

formenctype

重写表单的enctype属性

  First name: 

  
  

formmethod

重写表单的method属性

  First name: 

  Last name: 




专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

formnovalidate

重写表单的novalidate属性

E-mail: 

formtarget

重写表单的target属性

  First name: 

  Last name: