input類型詳解

一、文本輸入框

文本輸入框是input類型中最基礎也是最常用的一種類型。通過type屬性設置為text即可創建一個文本輸入框。

	<input type="text" placeholder="請輸入文本">

其中placeholder屬性可以設置文本框內默認提示文字。同時，還可以通過設置maxlength屬性限制用戶輸入的字符數。

	<input type="text" maxlength="10" placeholder="最多輸入10個字符">

此外，還可以在文本框中加入一些文本格式驗證，比如驗證用戶輸入是否為email地址，代碼如下：

	<input type="email" placeholder="請輸入您的郵箱地址">

輸入框依據type的不同還可以實現驗證用戶輸入的手機號、URL、日期等等，詳見官方文檔。

二、單選框和複選框

1、單選框

單選框通過type屬性設置為radio實現。可以使用一個name屬性對單選框進行分組，以確保用戶只能選中其中一個選項。

	<input type="radio" name="gender" value="male" checked>男
	<input type="radio" name="gender" value="female">女

其中value屬性可以用來在表單提交時傳遞給後端數據。checked屬性用來設置默認選項。

2、複選框

複選框通過type屬性設置為checkbox實現。也可以使用name屬性對複選框進行分組，但是不同於單選框，複選框可以多選。

	<input type="checkbox" name="hobby" value="basketball">籃球
	<input type="checkbox" name="hobby" value="football">足球

和單選框一樣，也可以利用checked屬性設置默認選中。

三、下拉框

通過select標籤和option標籤可以創建下拉框。可以使用multiple屬性開啟多選功能。

	<select name="province">
		<option value="" selected>請選擇省份</option>
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="gd">廣東</option>
	</select>

其中，selected屬性用於設置默認選項。

四、文件上傳

文件上傳通過type屬性設置為file實現。

	<input type="file">

用戶點擊該輸入框後可以選擇本地文件上傳。需要注意，在form表單中一定要設置enctype屬性為multipart/form-data才能正常提交文件。

五、按鈕

通過type屬性設置為button實現普通按鈕，通過type屬性為submit實現提交按鈕，通過type屬性為reset實現重置按鈕。

	<input type="button" value="普通按鈕">
	<input type="submit" value="提交">
	<input type="reset" value="重置">

如果需要自定義按鈕樣式，可以使用CSS樣式表來實現。

六、隱藏域

隱藏域通過type屬性設置為hidden實現。可以在表單中傳遞一些需要隱藏的數據，如id等。

	<input type="hidden" name="id" value="123">

用戶看不到這個輸入框，但是提交表單時所設置的值會被提交。