◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。
Web Camp←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
TechAcademy
Tech Camp
WebCampProプログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
チェックボックスはユーザーにデータを入力してもらうフォームでよく使われる要素です。複数の選択肢の中から複数の値を選択できます。今回はチェックボックスとは主にどんな役割を果たしているのか、どのような使い方をするのかといったことをお伝えしていきたいと思います。
チェックボックスの役割とは？
チェックボックスは入力を求められるページにおいて、複数の選択肢の中から複数の値を選択することができる要素です。
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
・HTMLのコーディングの概要をまとめてみたので、
HTMLのコーディングの仕方を解説を参考にしてみてください。
チェックボックスをチェックしておくには？
チェックボックスをあらかじめチェックしておきたいこともあるでしょう。その場合は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>
・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介！【HTML初心者入門】を参考にしてみてください。
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スキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら！
▼ついに開講！オンラインでWebデザインを学びたい方はこちら！
