在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>
若本篇對您有幫助還幫忙點個廣告支持,感恩。
沒有留言:
張貼留言