HTMLのチェックボックスの使い方を完全ガイド！初心者でもわかるinput type="checkbox"の基本
新人
「HTMLで複数の項目を選べるようなチェックボックスって作れますか？」
先輩
「うん、チェックボックスはinputタグにtype="checkbox"を指定すると作れるよ。アンケートや申込フォームでよく使われるよ。」
新人
「ひとつだけじゃなくて、複数選べる感じですよね？」
先輩
「その通り！じゃあ実際にHTMLのチェックボックスの使い方を見ていこう！」
1. チェックボックスとは
HTMLのチェックボックスは、ユーザーが複数の項目を選択できる入力フォームの一種です。inputタグのtype属性をcheckboxに設定することで作成できます。選ばれた項目だけがフォーム送信時に送られます。
複数の選択肢から複数を選ばせたいときに最適です。代表的な例としては、「利用規約に同意する」「メルマガを購読する」などがあります。
2. チェックボックスの基本的な書き方
チェックボックスを作成するには、以下のようにinput type="checkbox"を使います。
<form>
<input type="checkbox" name="subscribe" value="yes"> メールマガジンを受け取る
</form>
このように、value属性には送信されるデータを設定し、name属性にはサーバーで受け取る変数名を指定します。
3. 複数のチェックボックスを使う方法
複数のチェックボックスを作る場合は、name属性に同じ名前を使い、[]をつけるのが一般的です。これにより、複数の値が配列として送られます。
<form>
<label><input type="checkbox" name="hobby[]" value="sports"> スポーツ</label>
<label><input type="checkbox" name="hobby[]" value="music"> 音楽</label>
<label><input type="checkbox" name="hobby[]" value="reading"> 読書</label>
</form>
これで、スポーツ・音楽・読書などの趣味から好きなだけ選べるチェックボックスになります。
4. 初期状態でチェックを入れておく方法
チェックボックスに初めからチェックを入れておきたい場合は、checked属性を使います。
<form>
<label><input type="checkbox" name="agree" value="yes" checked> 利用規約に同意する</label>
</form>
このようにcheckedをつけるだけで、ページを開いたときにチェックが入った状態になります。
5. 実際のフォームでチェックボックスを使う例
チェックボックスを使った実践的なフォームの例として、興味のある言語を選んでもらうフォームを作成してみましょう。
<form action="/submit" method="post">
<p>興味のあるプログラミング言語を選んでください：</p>
<label><input type="checkbox" name="lang[]" value="html"> HTML</label>
<label><input type="checkbox" name="lang[]" value="css"> CSS</label>
<label><input type="checkbox" name="lang[]" value="javascript"> JavaScript</label>
<br>
<input type="submit" value="送信">
</form>
送信ボタンを押すと、選ばれた言語がサーバーに送信されます。選択されなかったものは送信されません。
6. チェックボックスとラベルの使い方
チェックボックスのテキストをクリックしても選択できるようにするには、labelタグを使って囲むか、for属性を使います。
<form>
<input type="checkbox" id="news" name="subscribe" value="yes">
<label for="news">ニュースレターを受け取る</label>
</form>
これで、ラベルの文字をクリックしてもチェックのオン・オフができるようになります。ユーザーにとって使いやすいフォームを作るためには重要なポイントです。
