Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Should labels ALWAYS have 'for' attribute?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #175680
    damon
    Participant

    I am thinking where there is a list of checkbox-labels and the list itself has a label
    (it used to be a multiple select element)

    I feel like it makes sense for the <ul> to have an ID and the label to have that ID in its for attribute.

    Is that valid? Is it preferred?

    I’m wondering whether to tell my team to never not use a ‘for’ in a label.. even if it’s being used in a non-standard (not 1label to 1form relationship) by definition a label still needs to be ‘for’ something right?

    What do y’all think?

    #175683
    Senff
    Participant

    I don’t think they HAVE to have a “for” attribute, it’s valid and allowed to not have it.

    Myself, from a functionality point of view I always do include it, to make the label clickable and functional: http://codepen.io/senff/pen/BxLCo

    #175699
    __
    Participant

    I am thinking where there is a list of checkbox-labels and the list itself has a label …
    I feel like it makes sense for the <ul> to have an ID and the label to have that ID in its for attribute.

    No, this would not be correct. Labels are for specific form inputs, not groups of inputs. The 1:1 relationship is the basis of how labels work (for example, almost all browsers use labels as toggles for selecting checkboxes/radios).

    From the spec:

    The for attribute may be specified to indicate a form control with which the caption is to be associated … the attribute’s value must be the ID of a labelable element in the same Document

    by definition a label still needs to be ‘for’ something right?

    Yes, but that doesn’t mean the for attribute is required. For example, if the input is nested inside the label, the label is “for” that input implicitly.

    #175749
    TheDutchCoder
    Participant

    It’s always a good idea to give a label a ‘for’ attribute and link it to the control’s ID.

    Like un-traq-ed said, you can also wrap a label around a control, then it will have an implied relationship, which is fine too.

    Although you’re not forced to use the ‘for’ attribute, I highly recommend doing it, because it’s both best-practice and really nice for impaired users.

    To be honest, I always find it sloppy whenever I can’t click a label to set the focus on a control ;-)

    As a side-note: whenever I need a ‘label-like’ element (e.g. something that looks like a label, but really isn’t, just like your ‘label’ above the list of controls), I just create a class called .label which has the same properties as an actual label.

    This way you can use it on virtually any element, without messing up any of the label-control relationships.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Other’ is closed to new topics and replies.