HTML input 單選與複選屬性 radio& checkboxes

HTML input中單複選屬性介紹

radio單選

單選按鈕讓用戶只選擇有限數量的選項之一:
程式碼顯示如下

<form action="/action_page.php">
  <p>Please select your favorite Web language:</p>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

呈現如下

參考資料
HTML

checkboxes複選

讓用戶從有限數量的選項中選擇一個或多個選項：
程式碼顯示如下

<h1>Show Checkboxes</h1>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
  <input type="submit" value="Submit">
</form>

呈現如下

參考資料
HTML input type=”checkbox”

提交屬性值

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

這裏有兩個 radio 單選框。 當用戶提交表單時，如果 indoor 選項被選中，表單數據會包含：indoor-outdoor=indoor。 也就是所選項的 name 和 value 屬性值

默認選項 checked屬性

用 checked 屬性把第一個複選框和單選按鈕都設置爲默認選中。
舉例:

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

顯示如下: