HTML：チェックボックスの実装方法、徹底ガイド。

HTML

最終更新：2017-08-18 by Joe

HTMLを使って、チェックボックスを実装する方法です。フォームを使って、実際にPOSTリクエストを送信する所までやってみます。

チェックボックスとは？

HTMLでの「チェックボックス」とは、複数の選択肢の中から、１つ、または、複数の選択を行うためのUIコンポーネントです。

ラジオボタンとよく似ていますが、ラジオボタンは「複数の中から１つだけ選ぶ」、チェックボックスは「複数の中から１個以上選ぶか、もしくは何も選ばない」という使い分けです。

チェックボックスの例：

ラジオボタンの例：

通常HTMLでは、チェックボックスは、「フォーム」と呼ばれる、ユーザによる選択・入力情報を、サーバー上の特定のアドレスに送信を行うための機能の一部として利用されます。

HTMLでチェックボックスを実装する

まずは、チェックボックスを含むフォームのソースコードの基本サンプルからです。わかりやすさのため、コメントを付けています。

<p>誰を仲間にしますか？</p>
<form method="post" action="http://checkbox-button-sample.com/handler.php">

  <!-- チェックボックス選択肢 -->
  <input id="cb-fighter" type="checkbox" name="company" value="fighter">
  <label for="cb-fighter">戦士</label>

  <!-- チェックボックス選択肢 -->
  <input id="cb-witch" type="checkbox" name="company" value="witch">
  <label for="cb-witch">魔法使い</label>

  <!-- チェックボックス選択肢 -->
  <input id="cb-priest" type="checkbox" name="company" value="priest">
  <label for="cb-priest">僧侶</label>

  <!-- 送信ボタン -->
　<input type="submit" value="決定">

</form>

コード自体はシンプルで、一度覚えてしまえば、以外に簡単なはずです。

上記のコードだけでは、このような粗野な状態に実装されます。

See the Pen チェックボックのサンプル実装（初期） by Joe (@akajoe) on CodePen.

いったん、指定した属性を詳しく見ていきます。

form要素の属性

他にも幾つかform専用の属性が存在しますが、一般的なフォームで利用するのは下記の２つでしょう。

属性	取りうる値	意味
method	GET, POST	フォームから送信するHTTPリクエストの種類です。通常は「POST」で送信するする事が多いですが、目的によっては「GET」でも構いません。
action	URL	フォームから送信する宛先のURLです。button要素や、input要素（submitタイプ）、formaction属性で上書きすることもできます。

input要素の属性

今回はcheckboxの実装ですので、typeの値を「checkbox」とします。input要素はこのtype値によって、種々の機能をフォームに与えることができます。

属性	取りうる値	意味
type	radio, checkbox, text, submit, 他	フォーム内のinputのタイプを指定します。今回はチェックボックスなので「checkbox」と指定します。なお、「submit」はフォームの内容をactionに書かれたメソッドで、送信するボタンの役割を果たします。
name	文字列	同じグループに含むチェックボックスに、同じname文字列を割り振ります。グルーピングすることで、選択肢の集合を明示できます。
id	文字列	あらゆるHTML要素共通の属性ですが、特に、チェックボックスのfor属性と一致させることで、label要素をクリック可能にできます。
value	送信する値	このチェックボックスがチェックされているとき、送信される値です。labelのテキストでなく、このvalue値が送信される事に注意します。
checked	なし	このチェックボックスががチェックされているかどうかです。checked属性がタグ内に存在するかどうかで、値は必要ありません。
disabled	なし	チェックボックスが無効化され、チェックできなくなります。checked属性がタグ内に存在するかどうかで、値は必要ありません。

label要素の属性

labelは主にinput要素の名前をテキストで表示するために利用するHTML要素です。labelには「どのinput要素に向けられたものなのか」を指定するfor属性があります。

属性	取りうる値	意味
for	対応するinput要素のid	forで指定されたIDを持つinputがあれば、ラベル自体もクリック可能になります。

CSSでレイアウトを整える

さて、上述のチェックボックスのスタイルを、CSSで整えていきます。まずはスタイリング実装例がこちらです。

See the Pen チェックボックのサンプル実装（リッチ） by Joe (@akajoe) on CodePen.

HTML:

上記のサンプルを展開したものです。幾つかHTML要素を置き換えています。

<form class="get-company" method="post" action="http://api.www-creators.com/sample/checkbox.php">

  <fieldset>
    <legend>誰を仲間にしますか？</legend>
    <label>
      <input type="checkbox" name="company" value="fighter">戦士
    </label>
    <label>
      <input type="checkbox" name="company" value="witch">魔法使い
    </label>
    <label>
      <input type="checkbox" name="company" value="priest">僧侶
    </label>
  </fieldset>

　<input type="submit" value="決定">

</form>

さて、いくつかのポイントを補足します。

fieldset と legend の利用

fieldsetはフォーム内の関連する要素群をグルーピングすることができます。必須ではありませんが、特定の選択肢グループを作る事に役立ちます。

同時に、同じfieldsetの中に、legend要素を利用すれば、fieldsetの役割を記述することができます。各ブラウザはこのfieldsetとlegendの組み合わせのデフォルトスタイルを実装していますので、そのデザインをそのまま利用するのも悪くありません。

また、これらの要素を使うことで、HTML構造をセマンティックに記載できますので、検索エンジンがフォームの内容を正しく理解するのにも、幾分役立つと考えられます。（実際にはどの程度効果があるか、わかりません）

label と input の階層化

スタイリングを行いやすくするため、チェックボックスのinput要素を、labelで囲んでしまいました。これには、今回は下記のようなメリットがあります。

labelにfor属性を振らなくても、ラベル文字列がクリック可能になる。
labelとinput親子関係になるので、CSS上で、ネームスペース管理しやすい。

いつもこれらがメリットとなるわけではありませんが、手段の一つとして知っておくことは良いことだと思います。

CSS:

CSSでネームスペース（＃）を確保するため、form要素にクラス名「get-company」を割り振っています。下記のように、CSSで、クラス名セレクタで限定することで、label、input要素のスタイリングを限定できます。また、input[type=checkbox]と、属性のセレクタを利用していますが、単純にクラスを割り振っても構いません。

/* フォーム全体 */
.get-company {
  padding: 10px;
}

/* レジェンド */
.get-company legend {
  font-weight: bold;
}

/* ラベル */
.get-company label {
  display: block;
}

/* チェックボックス */
.get-company label input[type=checkbox] {
  margin-right:10px
}

/* 送信ボタン */
.get-company input[type=submit] {
  appearance: none; /* ブラウザのスタイルをリセットする */
  outline: none;
  border: none;
  color: #fff;
  background-color: #7294f2;
  display: block;
  line-height: 48px;
  height: 50px;
  width:100%;
  margin: 20px 0;
  border-bottom:4px solid #67c; 
}

/* 送信ボタン（マウスオーバー） */
.get-company input[type=submit]:hover{
  background-color: #8af;
  cursor:pointer;
}

label をブロック要素にして、縦並びに

labelは、デフォルトではインラインレベルの要素ですので、CSSで明示的にブロックにして、縦並びを実現します。

ボタンのスタイリング

submit タイプのinput をスタイリングする際に、下記のプロパティを記述します。

input[type=submit] {
  appearance:none;
  display:block;
  outline:none;
  border:none;
  /* あとは好きに書く */
}

「appearance」はいわゆるブラウザUI部品のOSデザインを適応するための独自プロパティです。MacOSであればMacOSの、WindowであればWindowsが実装したGUIの見た目が適応されることになります。

これをいったんnoneにしてキャンセルしてやることで、ブラウザに依存せずに、意図通りスタイリングしやすくなります。

参考

デフォルトのラジオボタン、チェックボックスの見た目を調整する方法です。縦方向の中央揃えは初心者には、すこしテクニカルかもしれませんが、そこまで複雑ではないです。

チェックボックス(ラジオボタン)を縦に中央揃えするHTMLとCSS

あと、ラジオボタン版の記事です。（ほぼ同じ内容です）

HTML：ラジオボタンの実装方法、完全ガイド。