【HTMLフォーム】チェックボックスの作り方

今回はお問い合わせフォームなどにある
チェックボックスの作り方についてまとめてみたいと思います。

こんなかんじのサンプルを作ってみました。

See the Pen
qBbYXed by notebook (@orange-notebook)
on CodePen.

質問に対してチェックボックスが4つ並んでいて、複数選択できるようになっています。
また果物の名前をクリックすると、該当するチェックボックスが選択されます。

前回のラジオボタンとの違いとしては、以下のようになります。

では作り方をみていきましょう。

チェックボックスの作りかた

1：必要なタグ

チェックボックスを作るには以下の2つのタグが必要です。

inputタグには閉じタグがありません。

またinputタグとlabelタグには必要な属性がいくつかあるので、
もう少し詳しくみていきたいと思います。

 <div class="container">
   <form action="">
     <p>好きな果物にチェックを入れてください</p>
      <div>
        <input type="checkbox" name="fruit" id="banana" value="banana" />
        <label for="banana">バナナ</label>
      </div>
      <div>
        <input type="checkbox" name="fruit" id="orange" value="orange" />
        <label for="orange">オレンジ</label>
      </div>
      <div>
        <input type="checkbox" name="fruit" id="strawberry" value="strawberry" />
        <label for="strawberry">いちご</label>
      </div>
      <div>
        <input type="checkbox" name="fruit" id="grape" value="grape" />
        <label for="grape">ぶどう</label>
      </div>
    </form>
</div>

2： inputタグに必要な属性 (チェックボックス部分)

チェックボックス部分となる、inputタグに必要な属性は以下の4つです。

今回もデモの選択肢となっているバナナを例にみていきたいと思います。

<input type=”checkbox” name=”fruit” id=”banana” value=”banana”>

また同じ質問に対する選択肢なので、
バナナ以外の選択肢のname属性も「fruit」になっています。

3：labelタグに必要な属性 (果物の名前部分)

labelタグには以下の属性が必要です。

for属性はinputタグのid属性と同じ値にすることが必要です。

バナナの項目のHTMLでは以下のようになっています。

<label for=”banana”>バナナ</label>

これで基本的なチェックボックスの完成です！

参考：MDN web docs HTML <input type=”checkbox”>

【HTMLフォーム】セレクトボックスの作り方今回はお問い合わせフォームなどにあるセレクトボックスの作りかたについてまとめてみたいと思います。...

【HTMLフォーム】ラジオボタンの作り方今回はお問い合わせフォームなどで見られる、 ラジオボタンの作りかたをまとめてみたいと思います。...