HTML 表單元素（中）

阿新 • • 發佈：2019-01-02

type屬性總彙
type屬性解析

一、type屬性總彙

input元素可以用來生成一個供使用者輸入資料的簡單文字框。在預設的情況下，什麼樣的資料均可以輸入。而通過不通的屬性值，可以限制輸入的內容。

屬性名稱	說明
text	一個單行文字框，預設行為
password	隱藏字元的密碼框
search	搜尋框，在某些瀏覽器輸入內容會出現叉標記取消
submit、reset、button	生成一個提交按鈕、重置按鈕、普通按鈕
number、range	只能輸入數值的框；只能輸入一個在數值範圍的框
checkbox、radio	複選框，使用者勾選框；單選框，只能在幾個中選一個
image、color	生成一個圖片按鈕，顏色程式碼按鈕
email、tel、url	生成一個檢測電子郵件、號碼、網址的文字框
date、month、time、week、datetime、datetime-local	獲取日期和時間
hidden	生成一個隱藏控制元件
file	生成一個上傳控制元件

二、input元素解析

1、type為text值時

<form>
    <input type="text">
    <button>提交</button>
</form>

解釋：當type值未text時，呈現的就是一個可以輸入任意字元的文字框，這也是預設行為。並且，還提供了一些額外的屬性。

屬性名稱	說明
list	指定為文字框提供建議值的datalist元素，其值為datalist元素中的id值
maxlength	設定文字框最大字元長度
pattern	用於輸入驗證的正則表示式
placeholder	輸入字元的提示
readonly	文字框處於只讀狀態
disabled	文字框處於禁用狀態
size	設定文字框寬度
value	設定文字框初始值
required	表明使用者必須輸入一個值，否則無法通過輸入驗證

①、設定文字框輸入字元長度maxlength

<form>
    <input type="text" maxlength="10">
    <button>提交</button>
</form>

②、設定文字框長度（預設值20）size

<form>
    <input type="text" size="30">
    <button>提交</button>
</form>

③、文字框處於只讀狀態readonly

<form>
    <input type="text" value="xiaoxiaobukuang" name="user" readonly >
    <button>提交</button>
</form>

④、文字框處於禁用狀態disabled

<form>
    <input type="text" value="xiaoxiaobukuang" name="user" disabled >
    <button>提交</button>
</form>

⑤、設定文字提供的建議值

<form>
    <input type="text" list="abc">
    <button>提交</button>
</form>
<datalist id="abc">
    <option>蘋果</option>
    <option value="2">橘子</option>
    <option value="3" label="香蕉">
    <option value="菠蘿">
</datalist>

⑥、標明使用者必須輸入一個值，否則無法通過輸入驗證required

<form>
    <input required type="text">
    <button>提交</button>
</form>

⑦、設定文字輸入提示placeholder

<form>
    <input type="text" placeholder="請輸入內容">
    <button>提交</button>
</form>

2、type為password時

<form>
    <input type="password">
    <button>提交</button>
</form>

解釋：當type值為password時，一般用於密碼框輸入，所有的字元會顯示星號，密碼框也有一些額外屬性。

屬性名稱	說明
maxlength	設定密碼框最大字元長度
pattern	用於輸入驗證的正則表示式
placeholder	輸入密碼的提示
readonly	密碼框處於只讀狀態
disabled	文字框處於禁用狀態
size	設定密碼框寬度
value	設定密碼框初始值
required	表明使用者必須輸入一個值

3、type為search時

<form>
    <input type="search">
    <button>提交</button>
</form>

4、type為number、range時

<form>
    <input type="number">
    <button>提交</button>
    <br>
    <input type="range">
    <button>提交</button>
</form>

解釋：只限輸入數字的文字框，不通瀏覽器可能顯示方式不同。生成一個數值範圍文字框，只是樣式是拖動式。額外屬性如下：

屬性名稱	說明
list	指定為文字框提供建議值的datalist元素，其值為datalist元素額id值
min	設定可接受的最小值
max	設定可接受的最大值
readonly	設定文字框內容只讀
required	標明使用者必須輸入一個值，否則無法通過輸入驗證
step	指定上下調節值的步長
value	指定初始值

①、最大值和最小值（min、max）

<form>
    <input type="number" min="10" max="100">
    <button>提交</button>
</form>

②、步長step

<form>
    <input type="number" min="10" max="100" step="10">
    <button>提交</button>
</form>

5、type為date系列時（谷歌支援）

<form>
    <input type="date">
    <button>提交</button>
    <br>
    <input type="month">
    <button>提交</button>
    <br>
    <input type="time">
    <button>提交</button>
    <br>
    <input type="week">
    <button>提交</button>
    <br>
    <input type="datetime">
    <button>提交</button>
    <br>
    <input type="datetime-local">
    <button>提交</button>
    <br>
</form>

解釋：實現文字框可以獲取日期和時間的值，但支援的瀏覽器不完整。我們測試Chrome和Opera支援，其他的瀏覽器尚未支援。所以，在獲取日期和時間，目前還是推薦使用jQuery等前段庫來實現日曆功能。額外屬性和number一致。

6、type為color時（谷歌，火狐支援）

<form>
    <input type="color">
    <button>提交</button>
</form>

解釋：實現文字框獲取顏色的功能，最新的現代瀏覽器測試後IE不支援，其餘的都能顯示一個顏色對話方塊提供選擇；

7、type為checkbox、radio時

<form>
    音樂<input type="checkbox" name="music" value="1">
    體育<input type="checkbox" name="sport" value="2">
    <button>提交</button>
    <br>
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
    <button>提交</button>
</form>

解釋：生成一個獲取布林值的複選框或固定選項的單選框。額外屬性如下：

屬性名稱	說明
checked	設定複選框、單選框是否為勾選狀態
required	表示使用者必須勾選，否則無法通過驗證
value	設定複選框、單選框勾選狀態時提交的資料。預設為on

①、預設勾選，checked

<form>
    音樂<input type="checkbox" name="music" value="1" checked>
    體育<input type="checkbox" name="sport" value="2">
    <button>提交</button>
</form>

②、value，預設值為on

<form>
    <input type="radio" name="sex" checked>男
    <input type="radio" name="sex" value="女">女
    <button>提交</button>
    <button>提交</button>
</form>

8、type為submit、reset和button時

<form>
    <input type="submit">
    <input type="reset">
    <input type="button">
</form>

解釋：生成一個按鈕，三種模式：提交、重置和一般按鈕，和< button > 元素相同。

值名稱	說明
submit	生成一個提交按鈕
reset	生成一個重置按鈕
button	生成一個普通按鈕

如果是submit時，還提供了和button元素一樣的額外屬性：formaction、formenctype、formmethod、formtarget和formnovalidate。

9、type為image時

<form action="http://www.baidu.com" target="_blank">
    <input type="image" src="img.jpg">
</form>

解釋：生成一個圖片按鈕，點選圖片就實現提交功能，並且傳送了分割槽響應資料。圖片按鈕也提供了一些額外屬性。

屬性名稱	說明
src	指定要顯示圖片的URL
alt	提供圖片的文字說明
width	影象的寬度
height	影象的長度
提交額外屬性	formaction、formenctype、formmethod、formtarget和formnovalidate

10、type為email、tel、url時

<form action="http://www.baidu.com" target="_blank">
    <input type="email" name="email">
    <br>
    <input type="tel" name="tel">
    <br>
    <input type="url" name="url">
    <br>
    <button>提交</button>
</form>

解釋：email為電子郵件格式、tel為電話格式、url為網址格式。額外屬性和text一致。但對於這幾種型別，瀏覽器支援是不同的。email支援比較好，現在瀏覽器都支援格式驗證；tel基本不支援；url支援一般，部分瀏覽器只要檢測到http://就能通過。

11、type為hidden時

<form action="http://www.baidu.com" target="_blank">
    <input type="hidden">
</form>

解釋：生成一個隱藏控制元件，一般用於表單提交時關聯主鍵ID提交，而這個資料作為隱藏存在。

12、type為file時

<form action="http://www.baidu.com" target="_blank">
    <input type="file">
</form>

解釋：生成一個檔案上傳控制元件，用於檔案的上傳。額外提供了一些屬性。

屬性名稱	說明
accept	指定接受的MIME型別
required	標明使用者必須提供一個值，否則無法通過驗證

<form action="http://www.so.com" target="_blank">
    <input type="file" accept="image/gif,image/png,image/jpeg">
    <button>提交</button>
</form>