チェックボックスについて

概要

チェックボックスについて説明します。また、チェックボックスの横の文字をクリックしてもチェックボックスにチェックが入る方法についても説明します。

• 目次
• ソース
• 表示例
• ソースの解説

ソース

チェックボックスをクリックするとチェックが入るチェックボックス

• <input type="checkbox" name="checkbox-1" value="off">
•   <label>チェックボックス</label>
• </input>

文字をクリックしてもチェックが入るチェックボックス

• <input id="checkbox1" type="checkbox" name="checkbox-1" value="off">
•   <label for="checkbox1">チェックボックス</label>
• </input>

表示例

ソースの解説

文字をクリックしてもチェックが入るチェックボックスのHTMLの解説

<input id="checkbox1" type="checkbox" name="checkbox-1" value="off">

「id」と「name」を指定します。基本的に好きなものを指定してよい。

<label for="checkbox1">チェックボックス</label>

「for」に先ほど「id」で指定したものを指定します。

「チェックボックス」の部分は好きな文字に変更して問題ありません。

</input>

「input」で指定した「id」と「label」の「for」で指定する文字列を同じにする（上記の赤文字部分）必要があります。この2つの文字列が同じでなければ、文字をクリックしてもチェックボックスにチェックが入りません。