コラム

入力フォームで「利用規約に同意する」の入力でおなじみのチェックボックス。

HTMLでチェックボックスを自作するにはinputタグに専用の属性を設定する必要があります。

また、属性を追加することで必要に応じてスタイルをカスタマイズすることができます。

この記事では、チェックボックスの作り方とカスタマイズ方法を紹介します。

HTMLでチェックボックスの基本的な使い方

inputタグのtype属性にcheckboxを設定する inputタグのtype属性にcheckboxを設定します。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

この記載だけで画面にチェックボックスが表示されます。

しかし、チェックボックスしか表示されないのでinputタグの後ろにテキストを追加します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これで、チェックボックスの後ろに「リンゴ」と画面に表示されます。

しかし、このままではデータを送信するときになんという名前なのか、どういう値なのかがわからない状態です。

そのため、チェックボックスに名前と送信する値を設定します。

name属性を設定してチェックボックスに名前をつける

name属性をinputタグに追加して、checkboxに名前をつけます。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これで画面の表示は変わりませんが、このチェックボックスは「fruits」という名前がつきました。

name属性は下記のように同じ値のチェックボックスを複数作成することもできます。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

この場合、3つのチェックボックスのうちチェックできるのは1つだけです。

value属性を設定して送信する値を設定する

続いて、inputタグにvalue属性を追加します。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これでチェックボックスにチェックを入れて送信ボタンを押すと、「fruitsの値は1」としてデータが送信されます。

1つのname属性に対し、複数のチェックボックスがあった場合、送信できる値は1つです。

例えば、下記のチェックボックスのうち、「オレンジ」のチェックボックスを選んだ場合、送信されるデータは、「fruitsの値は2」となります。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

labelタグを追加してテキストを押してもチェックできるように設定する

今のままだとチェックボックスをクリックしないとチェックが入りません。

チェックボックスは小さい部品なので、このままでは少し不便です。

そこで、labelタグを追加することでチェックボックスの隣のテキストをクリックしてもチェックボックスにチェックが入るようにします。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これで「チェックしてください」のテキストをクリックするとチェックボックスにチェックが入ります。

HTMLでチェックボックスをカスタマイズ

inputタグにさらに属性を追加することで、チェックボックスをカスタマイズすることができます。

今回は下記の3つのカスタマイズについて紹介します。

・最初からチェックボックスにチェックが入るように設定する
・必ずチェックするように設定する
・選べる選択肢の数を設定する

最初からチェックが入るように設定する

画面を表示した時点でチェックボックスにチェックが入っている状態にカスタマイズします。

方法は、inputタグの最後に「checked」を追加するだけです。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これで画面の初期表示でチェックボックスにチェックが入っている状態にできました。

必ずチェックするように設定する

申込フォームによくある「利用規約に同意しますか？」のチェックボックスのようにチェックを入れなければ先に進めなくすることができます。

HTMLは下記のように記述します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

これで、チェックボックスにチェックをせずに先に進もうとすると「次に進むにはこのチェックボックスをオンにしてください。」というメッセージが出力されます。

選べる選択肢の数を設定する

name属性の説明で「同じname属性のチェックボックスが複数ある場合、送信できる値は1つ」と述べました。

しかし、id属性を設定することで同じname属性でも複数のチェックボックスに入力できるようになります。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

HTMLのチェックボックスを使いこなそう

チェックボックスの基本的な使い方とカスタマイズ方法を説明しました。

入力した内容をサーバや次の画面に送信する必要があるので、画面に表示される内容はシンプルですが、プログラムは複雑になります。

一つ一つ属性を加えていくことでミスなくプログラムを書けるはずです。

今回解説した内容を基に、チェックボックスを作成に挑戦してください。