Is It Better to Wrap The Label Tag Around a Form Item or Use The "For" Attribute in HTML

Is it better to wrap the label tag around a form item or use the for attribute in HTML?

Semantically, both possibilities are the same. But depending on what layout you want, there are advantages and disadvantages for the two possibilites. For example, if you want that the label is at an entirely different place, it would not make any sense to put the input into the label. But if you want to be able to make a hover-effect via css, that sets e. g. a background for both the label and the area around the input, it would be better to put the input into the label.

If an element is wrapped by a label, does the label require the for attribute?

According to the HTML5 spec - "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."

http://www.w3.org/TR/html5/forms.html#category-label

So basically, no it is not required as long as it is wrapping any of these elements: button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress, select, or textarea

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.

---

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

What does for attribute do in an HTML <label> tag?

The <label> tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:

One way is to wrap the label element around the input element:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

The other way is to use the for attribute, giving it the ID of the associated input:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

This is especially useful for use with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to hit the box itself.

Read more about the <label> element on MDN.

Associating text with an input is very important for accessibility, as it provides an accessible name for the input, so that assistive technology can provide it to users with disabilities. A screen reader would read the label text when the user focusses the input. You could also tell your voice command software to focus that input, but it needs a (visible) name for that.

Read more on Accessibility

ADA compliance - Wrapping input in label vs adding label before input

WebAIM.org gives advice on ADA and forms at the link below.

Creating Accessible Forms

Below is the method they recommended.

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

Whether hidden labels have any advantage or not in ADA is still a mystery.

HTML Correct way to wrap labels and fields

There are several correct ways. You can wrap them in a div, or in a span, or inside cells of a table row. Other approaches are possible, too, but less natural. A fieldset element is for a group of controls and associated labels. A group with a single control is formally correct, but rather pointless. Neither div nor span has any meaning assigned to it, apart from constituting a block level or inline element, respectively. But since you probably want each control to start on a new line, div makes things simpler, as it has such rendering by default. A table element constitutes a grid of elements and is therefore a natural choice, because a collection of controls and associated labels logically forms a grid.

In any case, note that label elements as used in the example are rather pointless and provide no functional advantages. They should have for attributes that associate each of them with its control, by its id attribute.

Can you wrap form elements such as <label> and <input> in HTML <button> tag?

You shouldn't wrap your input+label in a button. The result is going to be weird:

1. There shouldn't be any focusable element (such as input) inside another focusable element (such as button).
2. What the accessible label of the button should be ? It's probably going to be confusing.
3. What's going to be happen when you click on the button ? It's going to be unclear because the accessible name is going to be unclear, too.
4. Should the button be activated when clicking on the input, since the input is inside the button ? The answer depends on the browser and whatever it is, it's going to confuse / don't do what's expected and frustrate users.

For all these reasons, I heavily discourage you from using a button. Using a fieldset is much better, it's the normal way to go here.
Use CSS to make your fieldset look like a button.

For in Label Tags

The for of the <label> references to the id of the<textarea> (message). If you then click on the label, the focus is set to the <textarea> with the respective id.

You can also wrap the textarea with the <label>. Then, you can click on every element or text inside the <label> and the focus is also set to the <textarea>.

---

Related Topics