HTML - radio button

Posted on Edited on In Views: Disqus:

 

一組組 radio button 組成如下範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <input type="radio" id="id-1" name="group" value="1" checked>
    <label for="id-1">1</label>
    <input type="radio" id="id-2" name="group" value="2">
    <label for="id-2">2</label>
    <input type="radio" id="id-3" name="group" value="3">
    <label for="id-3">3</label>

    <form>
        <fieldset>
            <legend>Select a maintenance drone</legend>
            <input type="radio" id="huey" name="drone" checked />
            <label for="huey">Huey</label>
            <input type="radio" id="dewey" name="drone" />
            <label for="dewey">Dewey</label>
            <input type="radio" id="louie" name="drone" />
            <label for="louie">Louie</label>
        </fieldset>
    </form>

</body>
</html>

說明：

1、一組 radio button 的組成是經由指定相同的 name 來成一群組的。

2、每一組 radio button 中的 checked 屬性只能指定給一個 radio button。

3、radio button 也時常跟 form、fieldset、label 元素來配合。