Skip to content

input-requires-label rule should allow input tag nested inside label tag #1170

Open
@at6ue

Description

@at6ue

Currently, the input-requires-label rule forces the input tag to have an id attribute to associate a label tag, but the input tag without id attribute can be considered to be associated with a nesting label tag.

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
<label>: The Input Label element - HTML: HyperText Markup Language | MDN

According to HTML Standard,

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

So, my idea is to modify the rule to allow the first input tag nested inside a label tag without the for attribute.

Here is a small example: clicking on the "bar" label toggles the "baz" checkbox associated with the for attribute, instead of the nested "bar" checkbox.
https://jsfiddle.net/pL5s0mvk/

Metadata

Metadata

Assignees

No one assigned

    Labels

    PR neededhelp wantedWe are looking for community helpkeep-unstaleThe issue will not be marked as stale by the stale-botruleRelates to HTMLHint's core rules

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions