HTML input type 輸入類型__HTML

本章描述 <input> 元素的輸入類型。 輸入類型：text

<input type="text"> 定義供文本輸入的單行輸入欄位： 執行個體

<form> First name:<br><input type="text" name="firstname"><br> Last name:<br><input type="text" name="lastname"></form> 

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： First name:
 

Last name:
輸入類型：password

<input type="password"> 定義密碼欄位： 執行個體

<form> User name:<br><input type="text" name="username"><br> User password:<br><input type="password" name="psw"></form> 

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： User name:
 

User password:

注釋：password 欄位中的字元會被做掩碼處理（顯示為星號或實心圓）。 輸入類型：submit

<input type="submit"> 定義提交表單資料至表單處理程式的按鈕。

表單處理程式（form-handler）通常是包含處理輸入資料的指令碼的伺服器頁面。

在表單的 action 屬性中規定表單處理程式（form-handler）： 執行個體

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form> 

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： First name:
 

Last name:
 

如果您省略了提交按鈕的 value 屬性，那麼該按鈕將獲得預設文本： 執行個體

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit"></form> 

親自試一試 Input Type: radio

<input type="radio"> 定義選項按鈕。

Radio buttons let a user select ONLY ONE of a limited number of choices: 執行個體

<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form> 

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： Male 

Female Input Type: checkbox

<input type="checkbox"> 定義複選框。

複選框允許使用者在有限數量的選項中選擇零個或多個選項。 執行個體

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form> 

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： I have a bike 

I have a car Input Type: button

<input type="button> 定義按鈕。 執行個體

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

親自試一試

以上 HTML 程式碼在瀏覽器中看上去是這樣的： HTML5 輸入類型

HTML5 增加了多個新的輸入類型： color date datetime datetime-local email month number range search tel time url week

注釋：老式 網頁瀏覽器不支援的輸入類型，會被視為輸入類型 text。 輸入類型：number

<input type="number"> 用於應該包含數字值的輸入欄位。

您能夠對數字做出限制。

根據瀏覽器支援，限制可應用到輸入欄位。 執行個體

<form>  Quantity (between 1 and 5):  <input type="number" name="quantity" min="1" max="5"></form>

親自試一試 輸入限制

這裡列出了一些常用的輸入限制（其中一些是 HTML5 中新增的）：

屬性	描述
disabled	規定輸入欄位應該被禁用。
max	規定輸入欄位的最大值。
maxlength	規定輸入欄位的最大字元數。
min	規定輸入欄位的最小值。
pattern	規定通過其檢查輸入值的Regex。
readonly	規定輸入欄位為唯讀（無法修改）。
required	規定輸入欄位是必需的（必需填寫）。
size	規定輸入欄位的寬度（以字元計）。
step	規定輸入欄位的合法數字間隔。
value	規定輸入欄位的預設值。

您將在下一章學到更多有關輸入限制的知識。 執行個體

<form>  Quantity:  <input type="number" name="points" min="0" max="100" step="10" value="30"></form>

親自試一試 輸入類型：date

<input type="date"> 用於應該包含日期的輸入欄位。

根據瀏覽器支援，日期選取器會出現輸入欄位中。 執行個體

<form>  Birthday:  <input type="date" name="bday"></form>

親自試一試

您可以向輸入添加限制： 執行個體

<form>  Enter a date before 1980-01-01:  <input type="date" name="bday" max="1979-12-31"><br>  Enter a date after 2000-01-01:  <input type="date" name="bday" min="2000-01-02"><br></form>

親自試一試 輸入類型：color

<input type="color"> 用於應該包含顏色的輸入欄位。

根據瀏覽器支援，顏色選取器會出現輸入欄位中。 執行個體

<form>  Select your favorite color:  <input type="color" name="favcolor"></form>

親自試一試 輸入類型：range

<input type="range"> 用於應該包含一定範圍內的值的輸入欄位。

根據瀏覽器支援，輸入欄位能夠顯示為滑塊控制項。 執行個體

<form>  <input type="range" name="points" min="0" max="10"></form>

親自試一試

您能夠使用如下屬性來規定限制：min、max、step、value。