【HTML初心者入門】チェックボックスの使い方を解説！

チェックボックスはユーザーにデータを入力してもらうフォームでよく使われる要素です。複数の選択肢の中から複数の値を選択できます。今回はチェックボックスとは主にどんな役割を果たしているのか、どのような使い方をするのかといったことをお伝えしていきたいと思います。

チェックボックスの役割とは？

チェックボックスは入力を求められるページにおいて、複数の選択肢の中から複数の値を選択することができる要素です。

inputタグの属性のひとつで、ページの中で表示させるにはtype属性の値にcheckboxと設定します。チェックボックスは選択肢ごとにグループを設定することができ、例えばAグループのチェックボックスでは1と2が、Bグループの選択肢では2と3が選択されたといったことを判断できるようになっています。

チェックボックスの使い方を解説

グループ名を設定する

チェックボックスは選択肢のかたまりごとにグループ名を設定して使用します。例えばAという選択肢の中から値を選ぶ場合は、チェックボックスすべてにAという名前を設定します。これとは別にBという選択肢も設定したい場合は、チェックボックスにBという名前を設定すると、AとBのグループを区別することが可能です。

グループ名を設定するためにはname属性を使用します。チェックボックスの選択肢が同じグループの場合はnameの値を同じにする必要があります。

<input type=”checkbox” name=”A”>選択肢1
<input type=”checkbox” name=”A”>選択肢2

<input type=”checkbox” name=”B”>選択肢1
<input type=”checkbox” name=”B”>選択肢2

サーバーに送信する値を設定する

チェックボックスで選択された値をサーバーなど送信先に送信するには、チェックボックスに値を設定する必要があります。チェックボックスに設定された値は、前述したグループ名とともにサーバーに送信され、プログラムによって処理されます。

送信する値を設定するにはvalue属性を使用します。チェックボックスの送信される値は「選択肢1」などの文字列ではなく、このvalueに設定した値なので注意が必要です。

<input type=”checkbox” name=”A” value=”1”>選択肢1
<input type=”checkbox” name=”A” value=”2”>選択肢2

チェックボックスをチェックしておくには？

チェックボックスをあらかじめチェックしておきたいこともあるでしょう。その場合はchecked属性を使用します。タグの中にcheckedと書いておくと、チェックボックスが最初から選択された状態でページが表示されます。

<input type=”checkbox” name=”A” value=”1” checked>選択肢1
<input type=”checkbox” name=”A” value=”2”>選択肢2

チェックボックスを使えないようにするには？

何らかの理由でチェックボックスを使えないようにしたいときもあります。例えばチェックボックスの前段階の選択肢がチェックボックスを使う選択肢でなかったら、無用なデータ送信を避けるためにチェックボックスを無効にするといった場合などです。

チェックボックスを使えなくするにはdisabled属性を使用します。使い方はinputタグの中にdisabledの文字列を追加するだけです。これでチェックボックスがクリックできません。

<input type=”checkbox” name=”A” value=”1” disabled>選択肢1
<input type=”checkbox” name=”A” value=”2” disabled>選択肢2

文字をクリックしてもチェックできるようにするには？

チェックボックスだけでなく、一緒に表示している文字列をクリックしてもチェックされた状態にしたいといった場合もあるでしょう。

その場合はlabelタグでチェックボックスを囲むことで、文字もクリックできるようになります。小さいチェックボックスに狙いを定めるのはそれなりに疲れますので、文字列もクリックできるようにサイトを構築してあげるとユーザーに親切でしょう。

<label><input type=”checkbox” name=”A” value=”1”>選択肢1</label>
<label><input type=”checkbox” name=”A” value=”2”>選択肢2</label>

html5から導入された属性はこちら

form

チェックボックスが関連付けられているformタグを指定することができます。

autofocus

フォーカスをあらかじめ設定しておきたい場合に使用します。使い方はinputタグの属性にautofocusの属性を追加します。値は設定しない属性なのでそのままautofocusと入力すればフォーカスが設定されます。

<label><input type=”checkbox” name=”A” value=”1” autofocus>選択肢1</label>
<label><input type=”checkbox” name=”A” value=”2”>選択肢2</label>

required

同じグループのチェックボックスのうちどれかがチェックされていないと警告文が表示されサーバーに送信されません。古いブラウザや一部のブラウザは対応していないこともあるので、使用する場合は注意が必要です。

<label><input type=”checkbox” name=”A” value=”1” required>選択肢1</label>
<label><input type=”checkbox” name=”A” value=”2”>選択肢2</label>

まとめ

いかがですか？チェックボックスの役割や使い方についてご理解いただけましたか？

チェックボックスは複数の選択肢から複数の値を選択できるinput要素です。inputタグのtype属性にcheckboxと設定することでページに表示することができます。

checkboxは選択肢を複数表示させる性質があるので、複数の選択肢をグループ化することができます。name属性に同じ名前を設定するという方法で行い、送信ボタンが押されたときにname属性の値と、選択されたチェックボックスの値が両方サーバーに送られます。

そのほかさまざまな属性によってさまざまな設定が可能なので、いろいろと試して使い方を覚えてみてくださいね。

１ヶ月でHTML・CSSができる！「WebCamp」とは？

WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です！

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら！

無料説明会に申し込む(DMM WEBCAMP ビジネス教養コース)