---
title: 'HTML 属性: required'
slug: Web/HTML/Attributes/required
tags:
  - Attribute
  - Attributes
  - Constraint validation
  - Forms
  - required
translation_of: Web/HTML/Attributes/required
---
<p>{{HTMLSidebar}}</p>

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

<p>この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 <code>image</code> を含むボタンの種類もいずれも対応していません。</p>

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

<p>入力欄に <code>required</code> 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 <code>required</code> 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。</p>

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

<p>同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 <code>required</code> 属性がついたチェックボックスのみが必須になります。</p>

<div class="blockIndicator note">
<p>注: <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。</p>
</div>

<h3 id="Attribute_interactions" name="Attribute_interactions">属性の相互作用</h3>

<p>読み取り専用フィールドは値を持つことができないので、 <code>required</code> は <code><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></code> 属性が指定されている入力欄には影響を与えません。</p>

<h3 id="ユーザビリティ">ユーザビリティ</h3>

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

<h3 id="制約検証">制約検証</h3>

<p>要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

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

<h2 id="Examples" name="Examples">例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div class="group"&gt;
    &lt;input type="text"&gt;
    &lt;label&gt;Normal&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="group"&gt;
    &lt;input type="text" required="required"&gt;
    &lt;label&gt;Required&lt;/label&gt;
  &lt;/div&gt;
  &lt;input type="submit"&gt;
&lt;/form&gt;
</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.attributes.required")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref('validityState.valueMissing')}}</li>
 <li>{{cssxref(':required')}} および {{cssxref(':optional')}}</li>
 <li>{{htmlelement('input')}}</li>
 <li>{{htmlelement('select')}}</li>
</ul>