HTML <input type="radio"> 單選框 Radio Button

在HTML網頁可使用輸入元素(Input element)的單選框<input type="radio">，讓使用者可以進行單選。

Radio button通常是由多個<input type="radio">選項組成一組radio button group，讓使用者在這選項組進行單選。每個選項根據相同的name屬性值來組成一組。當表單提交時送出的值為選擇項目的value屬性的值。表示單選項目的文字擺在<input type="radio">後面。

例如下面是由多個radio button組成的單選，每個<input type="radio">有相同的name="color"，所以這幾個radio button為一組單選。

<label>選擇顏色:</label>
<label><input type="radio" name="color" value="blue">藍色</label>
<label><input type="radio" name="color" value="yellow">黃色</label>
<label><input type="radio" name="color" value="red">紅色</label>
<label><input type="radio" name="color" value="green">綠色</label>

效果如下。

選擇顏色: 藍色 黃色 紅色 綠色

如果要給定預設勾選的選項，在要預設勾選的<input type="radio">加上checked屬性。

<label>選擇縣市:</label>
<label><input type="radio" name="city" value="taipei">台北</label>
<label><input type="radio" name="city" value="taoyuan" checked>桃園</label> <!-- 預設選項 -->
<label><input type="radio" name="city" value="taichung">台中</label>

效果如下，可以看到有checked屬性的選項被預先選擇了。

選擇縣市: 台北 桃園 台中

如果單選項組為表單的必填項目，則在第一個<input type="radio">加上required屬性。

<form>
    <label>選擇性別:</label>
    <label><input type="radio" name="gender" value="male" required>Male</label>
    <label><input type="radio" name="gender" value="female">Female</label>
    <label><input type="radio" name="gender" value="lgpt">LGPT</label>

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

若本篇對您有幫助還幫忙點個廣告支持，感恩。

• Radio Button state (type="radio")
• HTML <input> 輸入元素 Input element 簡介
• HTML <input type="checkbox"> 複選框 Checkbox