HTML 属性: required

論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 required 属性は text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file<input> 型と <select> および <textarea> のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 :required 擬似クラスが一致します。属性が設定されていない場合は :optional 擬似クラスが一致します。

この属性は rangecolor は対応していませんし、どちらも既定値を持っているので関係がありません。 hidden は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 image を含むボタンの種類もいずれも対応していません。

なお、 colorrangerequired に対応していませんが、 color 型は既定値が #000000 であり、 range は、 minmax の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは minmax の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。

入力欄に required 属性がある場合、 :required 擬似クラスも適用されます。逆に、 required 属性に対応していて、この属性が設定されていない入力欄は、 :optional 擬似クラスに一致します。

同じ名前が付けられた radio ボタンのグループのでは、グループ内の一つのラジオボタンに required 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに required 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。

同じ名前が付けられた checkbox 入力型のグループでは、 required 属性がついたチェックボックスのみが必須になります。

注: aria-required="true" を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。

属性の相互作用

読み取り専用フィールドは値を持つことができないので、 requiredreadonly 属性が指定されている入力欄には影響を与えません。

ユーザビリティ

required属性を設定する、その <input>, <select>, <textarea> が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを :required 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 aria-required="true" を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ required に対応していない場合には問題ありません。

制約検証

要素が必須で、かつ要素の値が空文字列の場合、その要素は valueMissing に悩まされ、その要素が :invalid 擬似クラスに一致してします。

アクセシビリティの考慮

ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。

HTML

<form>
  <div class="group">
    <input type="text">
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required="required">
    <label>Required</label>
  </div>
  <input type="submit">
</form>

結果

仕様書

関連情報