`placeholder-label-option`

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

If a select element has a required attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element does not have an ancestor optgroup in between itself and the select element, then that option is the select element's placeholder label option.

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>

<!-- 不正: 最初のoption要素にvalue属性がないので、そのテキストが値になる -->
<select required>
  <option>選択してください</option>
  <option>オプション1</option>
</select>

<!-- 不正: option要素がない -->
<select required></select>

✅ 正しいコード例

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

<!-- 妥当: 最初のoption要素にvalue属性もテキストもないので、値が空文字列になる -->
<select required>
  <option></option>
  <option value="option1">オプション1</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

Interface​

Default Severity​

Interface

Default Severity