Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<input> — 選択系

<input> — 選択系

『input』要素の選択系タイプでは、複数の選択肢からユーザーに選ばせるフォームコントロールを作成できます。チェックボックスは複数選択、ラジオボタンは1つだけ選択するために使用します。

構文

<!-- チェックボックス（複数選択可） -->
<input type="checkbox" name="fruit" value="apple"> りんご

<!-- ラジオボタン（同じname属性で1つだけ選択） -->
<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue"> 青

<!-- あらかじめ選択状態にする -->
<input type="checkbox" name="agree" value="yes" checked> 同意する

属性一覧

属性	概要
type="checkbox"	チェックボックスを表示します。複数の選択肢を同時に選べます。
type="radio"	ラジオボタンを表示します。同じ『name』を持つグループの中から1つだけ選択できます。
name	フォームデータのキー名を指定します。ラジオボタンは同じ『name』でグループを作ります。
value	選択されたときにサーバーへ送信される値を指定します。
checked	ページ表示時にあらかじめ選択状態にします。値は不要な論理属性です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>選択系input</title>
</head>
<body>

  <form>
    <!-- チェックボックス（複数選択可） -->
    <p>好きな食べ物（複数可）：</p>
    <input type="checkbox" name="food" value="sushi"> 寿司
    <input type="checkbox" name="food" value="ramen" checked> ラーメン
    <input type="checkbox" name="food" value="tempura"> 天ぷら

    <!-- ラジオボタン（1つだけ選択） -->
    <p>好きな季節（1つだけ）：</p>
    <input type="radio" name="season" value="spring"> 春
    <input type="radio" name="season" value="summer" checked> 夏
    <input type="radio" name="season" value="autumn"> 秋
    <input type="radio" name="season" value="winter"> 冬

    <p><button type="submit">送信</button></p>
  </form>

</body>
</html>

実行結果

チェックボックスは「ラーメン」があらかじめチェックされた状態で表示され、複数選択が可能です。ラジオボタンは「夏」が選択された状態で表示され、選択できるのは1つだけです。

<!-- ブラウザ上での表示イメージ -->
好きな食べ物（複数可）：
□ 寿司  ☑ ラーメン  □ 天ぷら

好きな季節（1つだけ）：
○ 春  ● 夏  ○ 秋  ○ 冬

[ 送信 ]

概要

チェックボックス（『type="checkbox"』）は「同意する」「通知を受け取る」など複数の項目を独立して選択させたいときに使います。一方、ラジオボタン（『type="radio"』）は「性別」「支払い方法」など選択肢が排他的（1つしか選べない）な場合に使います。ラジオボタンのグループは同じ『name』属性でまとめる点が重要です。

『value』属性はフォーム送信時にサーバーへ渡される値です。『value』を省略すると、チェックボックスは "on" という文字列が送信されてしまうため、必ず適切な値を設定してください。

ラベルと関連付けるには『label』要素を使用します。ラベルをクリックしてもチェック・選択が切り替わるので、クリック範囲が広がりユーザビリティが向上します。