【HTML初心者入門】チェックボックスの使い方を解説! | プログラミング入門ならWEBCAMP NAVI
【1月枠も残りわずか】転職保証コース

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

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

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

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

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

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

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

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

グループ名を設定する

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

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

HTML
<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に設定した値なので注意が必要です。

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

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

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

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

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

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

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

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

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

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

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

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

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

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

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

form

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

autofocus

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

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

required

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

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

・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト4選!を参考にしてみてください。

まとめ

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

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

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

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

 

1月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%

 

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。