HTML STUDY

ラジオボタン

input要素にはいろいろな種類があり、typeコンテンツ属性に入力する値によって用途を指定することができます。今回は単一選択のラジオボタンについてまとめていきます。

<input type="radio">

type属性の値にradioを入力すると、複数項目の中から単一を選択するラジオボタンを作れます。name属性はサーバに送る項目名、value属性はサーバに送る値となります。checked属性は選択されている状態を示し、設定をしなければ未記入の状態で表示されます。項目名を表示させるためにinput属性のとなりに項目名をテキストで入力します。

属性(+値)解説
type="radio"単一選択の項目
nameラジオボタンの項目の名前(radio指定時)
valueサーバに送る値(radio指定時)
type="submit"送信ボタン
value送信ボタンの表示テキスト(submit指定時)
<form method="post" action="form.cgi">

<p>この記事は参考になりましたか?
<input type="radio" name="参考度" value="参考になった">参考になった
<input type="radio" name="参考度" value="ふつう">ふつう
<input type="radio" name="参考度" value="もっとがんばれ">もっとがんばれ
</p>
<p><input type="submit" value="送信する"></p>

</form>

ブラウザ表示例

記事は参考になりましたか? なった ふつう もっとがんばれ

※表示例なので送信はされません。

フォーム 関連記事