お問い合わせフォームやアンケートによく使われているのがチェックボックスである。初心者の場合、自分でコードを書いている時に
- ラジオボタンと何が違うの？
- 色々属性を設定できるけどどういう意味？
と悩んだことがあるのではないだろうか。
そこで今回はHTML初心者の方にもわかりやすいよう
- チェックボックスとラジオボタンの違い
- チェックボックスの作り方
- チェックボックスの属性
を紹介する。チェックボックスの使い方に悩んでいる人は、ぜひ参考にしてほしい。
チェックボックスとラジオボタンの違い
チェックボックスとラジオボタンは見た目も似ており、何が違うのかわかりにくい。そこでチェックボックスとラジオボタンの違いについて、まず使う場面から紹介する。チェックボックスを使う場面
チェックボックスは複数選択が可能。例えば「興味のある分野」のように、複数選択してもいい項目を作る場合はチェックボックスを使用する。ラジオボタンを使う場面
ラジオボタンは1つしか選択できない。複数ではなく、1つだけ選択してほしい項目を作る場合にラジオボタンを使用する。チェックボックスの作り方
では実際にチェックボックスを作ってみる。チェックボックスはinputタグの中のtype属性に「checkbox」を設定することで表示できる。ちなみに、<>で囲まれたタグの中に記述する項目を属性という。
<input type="checkbox" name="programming" value="html">HTML
<input type="checkbox" name="programming" value="css">CSS
<input type="checkbox" name="programming" value="javascript">JavaScript
このように表示される。上の例では、type属性の他に「name」や「value」という属性が設定してある。次に、それぞれの属性がどんな役割なのか見てみよう。
チェックボックスで設定できる属性
チェックボックスはお問い合わせフォームなどの部品の一つとして使う。表示だけなら<input type="checkbox">でいいのだが、フォームの部品として使う時に設定しなければならない属性がある。
チェックボックスを使う時には必須といえるので、一緒に覚えておこう。
チェックボックスの名前を指定する【name】
例えばお問い合わせフォームのように、何かの情報を送信する必要がある場合、HTMLだけでは機能を実現できない。PHPなどの別のプログラムに情報を送り、処理をする必要がある。name属性を指定すると、情報を送られたプログラムが「このフォームの部品は何なのか」と識別できるようになる。
複数のチェックボックスがある場合、同じname属性を指定することで「これは1つのグループなんだ」とプログラムに認識されるようになる。
<input type="checkbox" name="programming" value="html">HTML
<input type="checkbox" name="programming" value="css">CSS
<input type="checkbox" name="programming" value="javascript">JavaScript
上の例だと、HTML・CSS・JavaScriptは同じ「programming」というグループなんだとわかる。チェックボックスの場合、1つのグループから複数選択することができる。
また、name属性は次に紹介するvalue属性の値とセットでプログラムに送信されることになる。
チェックボックスで送信される値を指定する【value】
value属性は、そのチェックボックスが選択されている時にプログラムに送信される値になる。value属性を設定しておかないと、プログラム側にはどのチェックボックスが選択されているかわからない。必ず設定しておくこと。<input type="checkbox" name="programming" value="html">HTML
<input type="checkbox" name="programming" value="css">CSS
<input type="checkbox" name="programming" value="javascript">
上記のコードで「CSS」にチェックが入っている場合、「programming」というグループの中の「css」というチェックボックスが選択されているとプログラム側に送信される。
最初からチェックされた状態にする【checked】
checked属性を指定したチェックボックスは、最初からチェックされた状態で表示される。初期で選択させておきたい項目がある場合、checked属性を設定する。<input type="checkbox" name="programming" value="html" checked>HTML
<input type="checkbox" name="programming" value="css">CSS
<input type="checkbox" name="programming" value="javascript">JavaScript
このように、最初からHTMLがチェックされた状態になる。
チェックボックスを選択できないようにする【disabled】
disabled属性を指定したチェックボックスは、選択できないようになる。主にJavaScriptなどと合わせて、ユーザーの選択肢など特定の条件下でのみ項目を選択できないようにしたい時などに使う。
<input type="checkbox" name="programming" value="html">HTML
<input type="checkbox" name="programming" value="css" disabled>CSS
<input type="checkbox" name="programming" value="javascript">JavaScript
この場合、CSSは選択できなくなる。
まとめ
以上、チェックボックスについて、- チェックボックスとラジオボタンを使う場面
- チェックボックスを作るHTMLコード
- チェックボックスに設定できる属性4つ
の3つを紹介した。
「チェックボックスの作り方や使い方がわからない！」という方は、ぜひ参考にしてほしい。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/