CODEWITHSUNDEEP
html
Chris G.
Chris G.

Reputation: 25964

What is the HTML for="" attribute in <label>?

I have seen this in jQuery - what does it do?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Upvotes: 136

Views: 177813

Answers (12)

sharkwire
sharkwire

Reputation: 29

This error can also occur when you call a jsx element inside itself. Like so:

const Element = () => {
  return (
    <div>
      <Element />
    </div>
  )
}

export default Element;

Upvotes: 0

Kushagra Gour
Kushagra Gour

Reputation: 4966

It associates the label with an input element. HTML tags are meant to convey special meaning to users of various categories. Here is what label is meant for:

  1. For people with motor disabilities (also for general mouse users): Correctly used label tags can be clicked to access the associated form control. Eg. Instead of particularly clicking the checkbox, user can click on more easily clickable label and toggle the checkbox.
  2. For visually-challenged users: Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.

More about labelling -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Upvotes: 4

wasmup
wasmup

Reputation: 16223

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id:

<label for="username">Click me</label>
<input type="text" id="username">

The for attribute associates a <label> with an <input> element; which offers some major advantages:
1. The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
2. You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

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>Click me <input type="text"></label>

Notes:
One input can be associated with multiple labels.
When a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control.

Accessibility concerns

Don't place interactive elements such as anchors or buttons inside a label. Doing so, makes it difficult for people to activate the form input associated with the label.

Headings

Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.
If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

Buttons

An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Upvotes: 92

most venerable sir
most venerable sir

Reputation: 669

I feel the need to answer this. I had the same confusion.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

I changed the for attribute on the 'male' label to female. Now, if you click 'male' the 'female' radio will get checked.

Simple as that.

Upvotes: 14

Stanley85
Stanley85

Reputation: 417

FYI - if you are in an typescript environment with e.g.

<label for={this.props.inputId}>{this.props.label}</label>

you need to use htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>

Upvotes: 3

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

The for attribute is used in labels. It refers to the id of the element this label is associated with.

For example:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select>.

Quote from the specification:

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

As far as why your question is tagged with jQuery and where did you see it being used in jQuery I cannot answer because you didn't provide much information.

Maybe it was used in a jQuery selector to find the corresponding input element given a label instance:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Upvotes: 193

bipen
bipen

Reputation: 36531

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

Upvotes: 3

Ta Duy Anh
Ta Duy Anh

Reputation: 1488

It's the attribute for <label> tag : http://www.w3schools.com/tags/tag_label.asp

Upvotes: -3

PhonicUK
PhonicUK

Reputation: 13854

You use it with labels to say that two objects belong together.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

This also means that clicking on that label will change the value of the checkbox.

Upvotes: 5

Andrea Turri
Andrea Turri

Reputation: 6500

a fast example:

<label for="name">Name:</label>
<input id="name" type="text" />

the for="" tag let focus the input when you click the label as well.

Upvotes: 5

rahul
rahul

Reputation: 7663

it is used for <label> element

it is used with input type checkbox or redio to select on label click

working demo

Upvotes: 3

simply-put
simply-put

Reputation: 1088

it is used in <label> text for html

eg.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Upvotes: -1

Related Questions