<input type="checkbox">
<input> 要素の checkbox 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して（または選択せずに）送信することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
| input 要素の checkbox 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して（または選択せずに）送信することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| indeterminate は HTMLInputElement インターフェイスのプロパティで、チェックボックスが未決定状態にあるかどうかを示す論理値を返します。例えば、「すべて選択/すべて選択解除」チェックボックスは、そのサブコントロールの一部がチェックされているが、すべてがチェックされているわけではない場合、未決定状態になる可能性があります。indeterminate 状態は JavaScript 経由でのみ設定でき、 checkbox コントロールのみに関連します。 | 1 | 12 | 3.6 | 3 | 18 | 1 |
基本構文
HTML
<label><input type="checkbox" name="agree" required> I agree to the Terms of Service</label>
<fieldset>
<legend>Hobbies</legend>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
<label><input type="checkbox" name="hobby" value="music"> Music</label>
<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
</fieldset>ライブデモ
実務での使いどころ
-
<input type="checkbox"> の活用
<input> 要素の checkbox 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。