HTMLでラジオボタンを作成する方法：選択肢を一つのみ選ばせたい

今回はHTMLで、選択肢を選ぶ事ができるラジオボタンの作成の仕方を紹介します。
ラジオボタンは、チェックボックスと反対に複数の選択肢の中から1つしか選択出来ない物なので、複数の回答を求めない物に適しています。

お問い合わせフォームで「何の問合せですか？」と言った質問などに良く使われているイメージです。

HTMLでラジオボタンを作成する方法

<input type=”radio”>タグはラジオボックスを表すタグです。
ラジオボックスを正常に動作させるにはname属性とvalue属性は必須です。
また、checked属性はページが表示された時に押された状態になります。

ラジオボックスを作成する際のname属性は設問ごとに同じにしないと複数選択出来る様になってしまいます。

下記のHTMLはname属性が統一されているので1つしか選択出来ません。

<p class="chp">サンプル</p>
      <ul class="chli">
        <li>
          <label><input type="radio" name="situmon" value="1" checked>
            質問1
          </label>
        </li>
        <li>
          <label><input type="radio" name="situmon" value="2">
            質問2
          </label>
        </li>
       </li>
      </ul>

下記のHTMLはname属性が2種類あるのでその分選択出来てしまう。

<p class="chp">サンプル</p>
      <ul class="chli">
        <li>
          <label><input type="radio" name="setumonn" value="1" checked>
            質問1
          </label>
        </li>
        <li>
          <label><input type="radio" name="situmon" value="2">
            質問2
          </label>
        </li>
       </li>
      </ul>

以下は、お問い合わせフォームにありそうなサービス選択の項目を想定したサンプルです。
何か1つしか選択出来ない様になっています。

<p class="chp">サービスを選択して下さい</p>
      <ul class="chli">
        <li>
          <label><input type="radio" name="option" value="corporate" checked>
            コーポレートサイト
          </label>
        </li>
        <li>
          <label><input type="radio" name="option" value="LP">
            ランディングページ
          </label>
        </li>
        <li>
          <label><input type="radio" name="option" value="design">
            WEBデザイン
          </label>
        </li>
        <li>
          <label><input type="radio" name="option" value="WordPress">
            ワードプレス
          </label>
        </li>
        <li>
          <label><input type="radio" name="option" value="Ecommerce">
            ECサイト
          </label>
        </li>
        <li>
          <label><input type="radio" name="option" value="YH">
            ワイヤーフレーム
          </label>
        </li>
      </ul>

.chp {
font-weight: bold;
}
.chli {
list-style: none;
}

以上が「HTMLでラジオボタンを作成する方法：選択肢を一つのみ選ばせたい」でした。

HTMLでチェックボックスを作成する方法（選択肢の作成）

今回はHTMLを使ってクリックするとチェックが入るチェックボックスの作成の仕方を紹介します。チェックボックスは、お問い合わせや設問などで複数の選択肢がある場合で、複数の回答を求める際に適しています。

kt-life.net

2020.07.25

HTMLでプルダウンメニューの作成の仕方：お問い合わせなどに使用

今回はHHTMLでお問い合わせフォームなどに良くある、都道府県など複数の項目の中から1つを選択するプルダウンメニュー（ドロップダウンメニュー）の作成の仕方を紹介します。

kt-life.net

2020.07.25