placeholder-label-option

select要素にプレースホルダーラベルオプションが必要か確認します。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、および（もしあれば）select要素の選択肢のリストで最初のoptionの値が空文字列であり、そのoption要素の親ノードがselect要素（かつoptgroup要素でない）場合、そのoptionは、select要素のプレースホルダーのラベルオプションである。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、そのselect要素は、プレースホルダーのラベルオプションを持たなければならない。

HTML Living Standard 4.10.7 select要素より引用

❌ 間違ったコード例

<!-- 不正: 最初のoption要素の値が空でない -->
<select required>
  <option value="placeholder">プレースホルダー</option>
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
</select>

<select required size="1">
  <option value="placeholder">プレースホルダー</option>
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
</select>

<!-- 不正: 最初のoption要素の親がoptgroup要素 -->
<select required>
  <optgroup label="グループ">
    <option value="">プレースホルダー</option>
  </optgroup>
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
</select>

✅ 正しいコード例

<!-- 妥当: プレースホルダーラベルオプションを持っている -->
<select required>
  <option value="">プレースホルダー</option>
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
</select>

<!-- 妥当: プレースホルダーラベルオプションを持っていないが、multiple属性を持っている -->
<select required multiple>
  <option value="placeholder">プレースホルダー</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<!-- 妥当: プレースホルダーラベルオプションを持っていないが、1より大きいsize属性を持っている -->
<select required size="2">
  <option value="placeholder">プレースホルダー</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Interface

{
  "placeholder-label-option": boolean
}

Default Severity

error