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 の入力型には、どちらも既定値を持っているので対応していませんし、関係がありません。 color 型は既定値が #000000 です。 range の既定値は、 minmax の中間点です。宣言されていない場合、ほとんどのブラウザーでは minmax の既定値はそれぞれ 0 と 100 です。 requiredhidden 入力型でも対応していません。ユーザーが非表示のフォームフィールドに記入することを期待できないためです。また、 image を含むボタン入力型も、いずれも対応していません。

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

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

メモ: aria-required="true" を設定すると、ある要素(任意の要素)が必須であることをスクリーンリーダーに伝えますが、その要素が任意であるかどうかには関係ありません。

属性の相互作用

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

ユーザビリティ

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

制約検証

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

アクセシビリティの考慮

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

HTML

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

結果

仕様書

Specification
HTML
# attr-input-required
HTML
# attr-select-required
HTML
# attr-textarea-required

ブラウザーの互換性

html.elements.input.required

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
required

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.select.required

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
required

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.textarea.required

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
required

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報