FAQ: Learn HTML: Forms - Adding a Label

when submitting a form, the value of the name attribute is used,simple example:

https://jsbin.com/qavizakume/edit?html,js,output

see how i use username (value of name attribute) to retrieve the value from the form element?

for and id associate the label with the input element.

I think it’s starting to make sense. So in this example

<label for="name">Who Are You?</label>

The element designates the section of the code that will output, and so ‘name’ is arbitrary. It just makes deciphering the code easier to know what is being referenced?

<input type="text" name="name" id="name">

The element then calls out the type of input as ‘text’ as opposed to an integer or something else. And the ‘name’ and ‘id’ are simply references to the section of the code that designates this particular field. Is that correct? And if so, are the call outs for ‘name’ and ‘id’ redundant?

id and name have distinctly different purposes, so clearly they are not redundant.

Every form control that is intended to be transmitted to a server based handler on Submit will have a unique name. When the user clicks Submit, the form is parsed into key-value pairs in a special POSTDATA object. The name is the key, and control value is the value in this pair.

id is a page fragment identifier, and ties back to the label attribute, for. It has no role in the handling of the form data.

1 Like

For those still wondering why we need both name and id attributes, it becomes clear in section 8.

Do you ABSOLUTELY need a for attribute?

No, not in all cases. Only when the label element is a sibling of the input control is a for attribute recommended. From an assistive technology perspective it is a required attribute under accessibility guidelines (need to read up on this).

The LABEL is optional, when it comes down to it. It does make a lot of sense, though.

Here is a typical form from olden times…

<form>
<p>text <input></p>
<p><input> text</p>
</form>

But some authors used DIV, some used LI, and it was kind of up in the air in HTML 3.

HTML 4.0 introduced the LABEL element. Give this page a read,

https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1

and go to Label on MDN to read the documentation in modern terms.


Aside

When the INPUT is a child of LABEL, id and for are not needed, and rather moot. In reading accessibility guidelines, look for this distinction. It may be required (though not needed) in order to validate under WAI guidelines.

this is not a reply it is a question: can the input tag have type,name,id and value attributes all together in one tag or some have to exists separately but in the same form tag. plus i dont know how to ask a question

Why should that not be possible? Each attribute serves a distinct purpose, so they can be used together on a single <input> element.

As long as we understand the exact purpose being served we can use which attributes we see a need for. Is the form being submitted to a form handler on the server? If yes, then it MUST have a name attribute and value attribute, as applies to the specific control. These are paired up in the POST DATA as &name=value. Does the input have a unique handler on the client side, then very likely an id attribute will help to facilitate this. Is the control one of the non-text type? Then a type attribute will be needed to describe it.

Rather than thinking in terms of what should be there think in terms of actual purpose and need. Don’t think in terms of rules, but intended use.