表单系列之input类型与属性简介

input类型

传统类型

• text：<input type="text" maxlength="5" size="30" value="haha" />
• file: <input type="file" accept="image/gif">
• button: <input type="button">
• hidden: <input type="hidden" >
• submit: <input type="submit">
• reset: <input type="reset">
• password: <input type="password">
• radio: <input type="radio">
• checkbox: <input type="checkbox">
• image: <input type="image>

HTML5

• number：<input type="number" min=0 max=10>
• email：<input type="email">
• range：<input type="range" name="range" min="0" max="10" step="1">
• date：<input type="date" value="2011-01-04">
• time：<input type="time" value="22:52">
• month：<input type="month">
• week：<input type="week">
• datetime：<input type="datetime">
• datetime-local：<input type="datetime-local">
• color：<input type="color" value="#34538b">
• url: <input type="url">
• tel: <input type="tel">
• search: <input type="search">

input属性

传统属性

• accept
• alt
• checked
• disabled
• maxlength
• name
• readonly
• size
• src
• type
• value

readonly

作用：规定输入字段为只读
用法：readonly="readonly"
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本

readonly 与 disabled区别

readonly

• 只针对input(text / password)和textarea有效
• 提交表单时，接受值更改并且可以回传
• 可以接收焦点但不能被修改
• 可以使用tab键进行导航

disabled

• disabled对于所有的表单元素都有效
• 不能接收焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效
• 使用tab键时将被跳过
• 提交表单时，接受更改但不回传数据

HTML5

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height
• list
• max
• min
• multiple
• novalidate
• pattern
• placeholder
• required
• step
• width

autofocus

作用：使input自动获取焦点，当页面加载时 input 元素应该自动获得焦点
用法：autofocus = "autofocus"
注：IE 9 及之前的版本不支持

autocomplete

用法：autocomplete="on"