inputtype 指南

一、text 文本輸入框

input type=”text”

text 輸入框是最基本、最常用的類型，用於接收用戶輸入的文本或數字。

使用方式：

<form action="demo.php" method="post">
  Name:<input type="text" name="name"><br>
  <input type="submit" value="Submit">
</form>

name 屬性定義文本輸入框的名稱，用於提交表單。當用戶輸入內容後點擊提交按鈕，所填的數據將會以 name 屬性的值為 key，文本框里的內容為 value 進行提交。

其中 type=”submit” 的 input 可以讓用戶提交表單，或者 button 元素也可以作為提交按鈕使用。

二、password 密碼輸入框

input type=”password”

password 輸入框隱藏用戶輸入的文本，常用於用戶密碼或其他敏感信息輸入。與 text 類型相似，使用方式也基本相同。

使用方式：

<form action="demo.php" method="post">
  Password:<input type="password" name="pwd"><br>
  <input type="submit" value="Submit">
</form>

注意：password 類型輸入框無法使用自動填充功能，既瀏覽器不會記住密碼。

三、radio 單選框

input type=”radio”

radio 單選框可以讓用戶從多個選項中選擇其中一個。

使用方式：

<form action="demo.php" method="post">
  Gender:<br>
  <input type="radio" name="gender" value="male" checked>Male<br>
  <input type="radio" name="gender" value="female">Female<br>
  <input type="submit" value="Submit">
</form>

以上代碼展示了一個包含男、女兩個選項的 radio 單選組，並默認選中男性。

name 屬性定義了單選組的名稱，value 屬性則相當於給每個單選框起個名字，當用戶選擇某一個單選框時，所選的值就會以 name 屬性的值為 key，value 屬性所設定的值為 value 進行提交。

四、checkbox 複選框

input type=”checkbox”

checkbox 控件可以讓用戶從多個選項中任意選擇多個（或一個）。

使用方式：

<form action="demo.php" method="post">
  Fruits:<br>
  <input type="checkbox" name="fruit[]" value="apple">Apple<br>
  <input type="checkbox" name="fruit[]" value="banana">Banana<br>
  <input type="checkbox" name="fruit[]" value="orange">Orange<br>
  <input type="submit" value="Submit">
</form>

以上代碼展示了一個三個選項的 checkbox 組，並將選中的值保存到一個名為 “fruit[]” 的數組中。

注意：指定一個名為 “fruit[]” 的數組是非常必要的，如果只是簡單的使用 name=”fruit”，那麼只會提交最後一個被選中的項的 value。

五、select 下拉框

<select> 和 <option>

select 元素創建了一個下拉列表。通過其中的 option 元素進行選項設置，用戶可以在列表中選擇一個或多個選項。

使用方式：

<form action="demo.php" method="post">
  City:<br>
  <select name="city">
    <option value="tokyo">Tokyo</option>
    <option value="newyork">New York</option>
    <option value="paris">Paris</option>
    <option value="beijing">Beijing</option>
  </select><br>
  <input type="submit" value="Submit">
</form>

以上代碼創建了一個包含 4 個選項的城市列表，選中的值將會以 name 屬性的值為 key，選中的 option 的 value 屬性的值為 value 進行提交。如果沒有設置 value 屬性，option 中的文本將會被作為 value 進行提交。

六、submit 提交按鈕

input type=”submit”

一個表單中需要一個提交按鈕，用戶點擊這個按鈕即可提交表單中的數據。

使用方式：

<form action="demo.php" method="post">
  <input type="submit" value="Submit">
</form>

以上代碼創建了一個簡單的提交按鈕。value 屬性定義了按鈕上顯示的文本。