論理属性のrequired 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。

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

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

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

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

属性の相互作用

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

ユーザビリティ

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

制約検証

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

アクセシビリティの考慮

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

例

HTML

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

結果

仕様書

ブラウザーの互換性

html.elements.input.required

html.elements.select.required

html.elements.textarea.required

関連情報

• validityState.valueMissing
• :required および:optional
• <input>
• <select>