Learn HTML by Building a Photo Cat App 54~61 - checkbox属性

  • フォームの質問で複数の回答を得たい場合、input要素のtype属性の値をcheckboxにするとチェックボックス形式になる。
  • input要素とinput要素のテキストを関連付けるには、テキスト部分をlabelでネストし、label要素にinput要素のid属性の値と同じ値のfor属性を追加することでもできる。
  • input要素をlabel要素でネストする方法との違いはなんだろうと思ってchatgptに聞いてみたらCSSなどで個別に操作したいときはlabel要素のfor属性を用いたほうが扱いやすい。一方でlabel要素でネストする方法のがHTMLはスッキリするとのこと。
  • ラジオボタン同様、選択されたチェックボックスのフォームデータはname・value属性をペアとして扱われる。value属性を追加するかは任意ではあるが追加するのがベストプラクティスとなる。
  • ベストプラクティスって言葉を初めて知った。日本語でどう表現したものかと思ったけどカタカナ語とするのがベストプラクティス!
  • デフォルトで選択された状態にするためにはinput要素にchecked属性を追加する。required同様属性値はない。ラジオボタンでも可能。