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つしか選択出来ない様になっています。

HTML/CSS

HTML

<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>

CSS

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

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