【HTML Living Standard】checkbox属性値の使い方
checkbox属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
checkbox定数は、HTMLのinput要素のtype属性に指定する値として、ユーザーが複数の選択肢から一つまたは複数を選ぶことができるチェックボックス形式の入力欄を表す定数です。このtype属性にcheckboxという値を設定することで、ウェブブラウザは、GUI上で四角いチェックボックスと、その横に表示されるテキストラベルを生成します。ユーザーはこのチェックボックスをクリックすることで、選択状態と未選択状態を自由に切り替えることが可能です。
主にウェブフォームにおいて、利用規約への同意、アンケートの項目選択、設定オプションのオン/オフなど、ユーザーに複数の選択肢を提示し、その中から必要なものを自由に選択してもらう場面で広く利用されます。
checkboxを使用する際には、どのチェックボックスがどの項目に対応するかを明確にするために、関連する<label>要素と組み合わせることが推奨されます。また、同じグループのチェックボックスには共通のname属性値を設定し、それぞれのチェックボックスが持つ固有のデータをvalue属性で指定します。例えば、<input type="checkbox" name="hobbies" value="reading">のように記述します。さらに、checked属性を追加することで、ページが読み込まれた際にデフォルトでチェックされた状態に設定することも可能です。
JavaScriptなどのスクリプト言語と連携させることで、ユーザーがチェックボックスの選択状態を変更したときに特定の処理を実行したり、フォーム送信前に選択されている項目を検証したりするなど、動的なWebアプリケーション開発において重要な役割を果たします。
構文(syntax)
1<input type="checkbox">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません