[Back To Basic] HTML5 - Input 屬性(Attributes)

• value

預設值

• readonly

唯讀(值無法改變)

• disabled

不可使用(表單送出時，這個輸入框的值也不會被送出)

• size

輸入框長度(n個字元)

• maxlength

最大可輸入的長度

• 沒有預設的回饋，如果要做一些警告訊息的話，必須自己寫一些code
• 最安全的方式還是由server接收時確認

HTML5新增的屬性(Attributes)

• autocomplete
• form和input皆可使用
• 提示使用者輸入過的文字
• novalidate
• form的屬性
• 在submit的時候不用驗證表單內的所有輸入框
• autofocus
• 顧名思義，就是在頁面載入後自動鎖定這個輸入框
• form
• 指定input所屬的form
• formaction
• 可使用在type="submit"或type="image"的情境
• 將指定的控制項送到指定的連結(url)
• formenctype
• 可使用在type="submit"或type="image"的情境
• 指定表單資料的加密方式(只有在form的method="post"才可使用)
• formmethod
• 可使用在type="submit"或type="image"的情境
• 指定http method的動詞
• formnovalidate
• 可使用在type="submit"的情境
• 可指定此控制項送出時，不驗證表單
• formtarget
• 可使用在type="submit"或type="image"的情境
• 可指定送出後，如何顯示response
• height 和 width
• 可指定type="image"時圖片的寬高
• 使用圖片時一定要指定寬高，不然render的期間會因畫面閃爍造成使用者體驗不佳
• list
• 可參考<datalist>預先定義好的選項
• min 和 max
• 指定數值類型控制項的上下限
• 可使用的type有number, range, date, datetime-local, month, time, week
• multiple
• 可使用在type=email,或file
• 允許單一控制項擁有一個以上的值
• pattern
• 可以設定正則表達式在控制項上
• 可使用在type=text, search, url, tel, email, password
• 記得用提示幫助使用者了解這個控制向的規則
• placeholder
• 可在輸入值之前顯示提示訊息在控制向上
• 可使用在type=text, search, url, tel, email, password
• required
• 必填
• 可使用在type= text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
• step
• 可指定可輸入數值的間隔
• 可使用在type= number, range, date, datetime-local, month, time, week
• 可以配合min和max使用