What are these HTML form fields for?

Question

Hi, I saw some code, html form code which looks like this:

<form name="form1" method="post" action="action.php">
    <label for="name"> Name: <input type="text" name="name">
    <label for="email">Email: <input type="text" name="email">
</form>

What are the form "name" for? (-> form1)

What are the label tag for? (i never use this, so, i might wrong when enter the code)

Answer 1

Labels are pieces of text next to input fields - they don't look any different from normal text, but:

• clicking on them puts the focus on the field
• screenreaders will read them out as a description of the corresponding field.

They are also be useful for CSS - by using labels, you can easily style your field labels independently of other page elements.

The form name attribute makes it easier to reference the form from JavaScript (though these days you'd use id for that).

Answer 2

Label is a tag which associates a certain text with the form element. It is the recommended way of showing what each input box is for - screen-readers and other accessibility software will then be able to use this element to tell the user what the input box is for. It can be styled in the same way as any other element on the page, and does not even have to be next to the input - as long as the names are the same, it will work. Note that the correct format for this should actually be

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

For more information on the label element, visit http://www.w3.org/TR/html401/interact/forms.html#h-17.9 - the page has lots of information on everything to do with HTML forms.

The name attribute of the form element can be useful for accessing different forms from javascript and css, but it is not necessary to include it. According to http://www.w3.org/TR/html401/interact/forms.html#adef-name-FORM it is only included for backward compatibility - it is recommended that you use the id attribute instead (or as well).

Answer 3

Label semantically connects the "Name:" string with the appropriate input field, specified by the for attribute. See more in the w3c html documentation.

Also, when user clicks on the label, corresponding input field is focused - this is important in terms of form usability.

Answer 4

The form name is to uniquely identify this form, so you can refer to it when scripting in JavaScript for example. You can also use the "id" attribute for this, it makes no difference.

A label element is for usability and doesn't render any differently than normal text, but if you populate the "for" attribute with the "id" attribute of the related input, then these will be bound together so that the user can click on the label text and it will focus on the appropriate input.

It's worth noting that the label code you have used in your question is incorrect as you need to close the label tag after the text you want to use for the label.

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