一、表單簡介
表單元素簡介
- 無論是實作功能還是展示頁面元素，表單在HTML中都有不可能替代的作用
- 在其他版本的HTML中，表單包含的元素非常有限，并且屬性也不多，尤其是在資料互動過程中資料的驗證需要編寫大量的JavaScript代碼
- 上述的不足，都已經在HTML5中被客服了。HTML5在以上的基礎上增加了許多标簽以及屬性，為開發人員帶來了極大的友善
二、input 類型
電子郵件類型
- 功能描述: 輸入E-mail位址的文本框
- 文法: <input type="email" />
搜尋類型
- 功能描述: 輸入搜尋關鍵字操作的文本框
- 文法: <input type="search" />
URL類型
- 功能描述: 輸入Web站點位址的文本框
- 文法: <input type="url" />
電話号碼類型
- 功能描述: 主要針對電話号碼的輸入，能夠訓示浏覽器根據不同的裝置進行調整
- 文法: <input type="tel" />
數字類型
- 功能描述: 隻能接收數字值
- 文法: <input type="number" />
- 屬性:
- min: 目前域能接受的最小值
- max: 目前域能接受的最大值
- step: 決定了域所接受值遞增或遞減的步長，預設為1
範圍類型
- 功能描述: 允許使用者選擇一個範圍的數值
- 文法: <input type="range" min="10" max="1000" value="50" />
- 屬性:
- min: 範圍的下限值
- max: 範圍的上限值
- step: 聲明該值遞增或遞減的步長
- value: 設定初始值
顔色類型
- 功能描述: 預定義的顔色拾取控件
- 文法: <input type="color" />
自定義調色器
- 通過三個範圍選擇控件表示R、G、B，并且預設值都為0，最大值為255
- 滑動不同的範圍控件可以實作顔色的變化
日期類型
- 功能描述: 建立一個日期輸入域
- 文法: <input type="date" />
周類型
- 功能描述: 與date類型相似，但是隻能選擇周
- 文法: <input type="week" />
月類型
- 功能描述: 與date類型相似，但是隻能選擇一個月份
- 文法: <input type="month" />
三、新表單元素
新表單元素
- <datalist>元素
- 是一個表單特有的元素，它可以使用list屬性預建立一組清單項，後面可以為輸入框的輸入提示
- <progress>元素
- 表示一個任務的完成進度，而且通常這些任務都在表單中啟動和處理
- 屬性:
- value: 任務執行的進度
- max : 聲明任務完成後達到的值
- <meter>元素
- 與<progress>元素類似，可用于顯示刻度，而非進度
- 屬性:
- min和max: 設定範圍的邊界
- value : 确定測量的值
- low、high和opimum: 将範圍劃分為不同的部分和設定最佳位置
- <output>元素
- 通常用于顯示表單元素處理的結果值
for : 将output元素與參與計算的源元素相關聯，目的為了提高代碼可讀性