required属性をつけるとフォーム送信するときにブラウザがエラーメッセージを表示する
required属性が使える要素
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="file">
<input type="checkbox">
<input type="radio">
<textarea>
<select>
required属性の注意点
hidden や display: none の要素には適用されない
→ 非表示のフィールドには required は適用されず、エラーにならない
<input type="checkbox">を複数使う場合、1つ以上の選択を必須にするには JavaScript が必要
→ required では 1つ以上のチェックを強制できない（JavaScript で対応）
ブラウザによってエラーメッセージが異なる
→ required のエラーメッセージをカスタマイズするには JavaScript を使う
required属性のエラーメッセージをカスタマイズ
<input type="text" name="username" required oninvalid="this.setCustomValidity('ユーザー名を入力してください')" oninput="this.setCustomValidity('')">
oninvalid でカスタムメッセージを設定し、oninput でリセットする