radio（ラジオボタン）

<input>タグの属性で、type="radio"を指定すると、ラジオボタンを定義します。複数の選択肢から、1つの項目のみを選択することのできる選択肢を設けることができます。type="radio"を指定した場合に使用できる属性は以下のようになります。

ラジオボタンの属性
属性	イベントフォーカス name value checked disabled

name属性

name属性は、<input>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラムなどから参照されます。type="radio"を指定した場合、このname属性は必須となります。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号なども使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」（アンダーバー）を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。

value属性

value属性には、ラジオボタンが選択された状態でフォームが送信された場合にプログラムに渡す値を指定します。ラジオボタンが選択されていない状態の項目の値は、プログラムに渡されません。この属性は、ラジオボタンには必須となります。

checked属性

checked属性を指定すると、あらかじめラジオボタンが選択された状態にすることができます。

disabled属性

disabled属性を指定すると、ラジオボタンを使用不可にします。ブラウザには表示されるが、選択はできないラジオボタンとなります。

入力例

入力例です。各属性の働きを確認してみてください。

input_radio.html


<html>
    <head>
        <title>&lt;input type="radio" /&gt;の例</title>
    </head>
    <body>
        <p>血液型は？
        </p>
        <form action="xxxxxx" method="post">
            <div><input type="radio" name="type_blood" value="a" checked="checked" />A型</div>
            <div><input type="radio" name="type_blood" value="b" />B型</div>
            <div><input type="radio" name="type_blood" value="o" />O型</div>
            <div><input type="radio" name="type_blood" value="ab" />AB型</div>
            <div><input type="radio" name="type_blood" value="unknown" disabled="disabled" />不明</div>
        </form>
    </body>
</html>

checkbox

ページの先頭

submit

2024 Webデザインレッスンプライバシーポリシーサイト管理者に連絡