表單系列之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"