HTMLでチェックボックスを作る方法｜input checkbox

📌

結論

チェックボックスは <input type="checkbox"> で作れます

📝 実際のコードはこちら

<label><input type="checkbox" name="agree"> 同意する</label>

labelで囲むのがポイント

<label> で囲むと、同意するのテキストをクリックしてもチェックが入ります。クリック範囲が広くなるので、特にスマホでは必須のTIPSです。

状態	送信される値
チェックあり	`agree=on`
チェックなし	何も送信されない

チェックを必須にしたい場合は、JavaScriptでバリデーションを追加します。

・チェックボックスは input type="checkbox" ・<label> で囲んでクリック範囲を広くする・未チェック時はデータが送信されない

同意するチェックボックスを作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

同意するというラベル付きのチェックボックスを作ってください。

詰まったらヒント

input type="checkbox"、labelで囲む