網頁

2019/8/21

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>

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


沒有留言:

張貼留言