Html form elements name

How to structure a web form

With the basics out of the way, we’ll now look in more detail at the elements used to provide structure and meaning to the different parts of a form.

Prerequisites:	Basic computer literacy, and a basic understanding of HTML.
Objective:	To understand how to structure HTML forms and give them semantics so they are usable and accessible.

The flexibility of forms makes them one of the most complex structures in HTML; you can build any kind of basic form using dedicated form elements and attributes. Using the correct structure when building an HTML form will help ensure that the form is both usable and accessible.

The element

We already met this in the previous article.

Warning: It’s strictly forbidden to nest a form inside another form. Nesting can cause forms to behave unpredictably, so it is a bad idea.

It’s always possible to use a form control outside of a element. If you do so, by default that control has nothing to do with any form unless you associate it with a form using its form attribute. This was introduced to let you explicitly bind a control with a form even if it is not nested inside it.

Let’s move forward and cover the structural elements you’ll find nested in a form.

The and elements

Many assistive technologies will use the element as if it is a part of the label of each control inside the corresponding element. For example, some screen readers such as Jaws and NVDA will speak the legend’s content before speaking the label of each control.

form> fieldset> legend>Fruit juice sizelegend> p> input type="radio" name="size" id="size_1" value="small" /> label for="size_1">Smalllabel> p> p> input type="radio" name="size" id="size_2" value="medium" /> label for="size_2">Mediumlabel> p> p> input type="radio" name="size" id="size_3" value="large" /> label for="size_3">Largelabel> p> fieldset> form> 

Note: You can find this example in fieldset-legend.html (see it live also).

When reading the above form, a screen reader will speak «Fruit juice size small» for the first widget, «Fruit juice size medium» for the second, and «Fruit juice size large» for the third.

The element

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

With the associated correctly with the via its for attribute (which contains the element’s id attribute), a screen reader will read out something like «Name, edit text».

There is another way to associate a form control with a label — nest the form control within the , implicitly associating it.

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

Even in such cases however, it is considered best practice to set the for attribute to ensure all assistive technologies understand the relationship between label and widget.

If there is no label, or if the form control is neither implicitly nor explicitly associated with a label, a screen reader will read out something like «Edit text blank», which isn’t very helpful at all.

Labels are clickable, too!

Another advantage of properly set up labels is that you can click or tap the label to activate the corresponding widget. This is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.

For example, clicking on the «I like cherry» label text in the example below will toggle the selected state of the taste_cherry checkbox:

form> p> input type="checkbox" id="taste_1" name="taste_cherry" value="cherry" /> label for="taste_1">I like cherrylabel> p> p> input type="checkbox" id="taste_2" name="taste_banana" value="banana" /> label for="taste_2">I like bananalabel> p> form> 

Note: You can find this example in checkbox-label.html (see it live also).

Multiple labels

Strictly speaking, you can put multiple labels on a single widget, but this is not a good idea as some assistive technologies can have trouble handling them. In the case of multiple labels, you should nest a widget and its labels inside a single element.

Let’s consider this example:

p>Required fields are followed by span aria-label="required">*span>.p>  Name: *    Name: *   div> label for="username">Name: span aria-label="required">*span>label> input id="username" type="text" name="username" required /> div> 

The paragraph at the top states a rule for required elements. The rule must be included before it is used so that sighted users and users of assistive technologies such as screen readers can learn what it means before they encounter a required element. While this helps inform users what an asterisk means, it can not be relied upon. A screen reader will speak an asterisk as «star» when encountered. When hovered by a sighted mouse user, «required» should appear, which is achieved by use of the title attribute. Titles being read aloud depends on the screen reader’s settings, so it is more reliable to also include the aria-label attribute, which is always read by screen readers.

The above variants increase in effectiveness as you go through them:

• In the first example, the label is not read out at all with the input — you just get «edit text blank», plus the actual labels are read out separately. The multiple elements confuse the screen reader.
• In the second example, things are a bit clearer — the label read out along with the input is «name star name edit text required», and the labels are still read out separately. Things are still a bit confusing, but it’s a bit better this time because the has a label associated with it.
• The third example is best — the actual label is read out all together, and the label read out with the input is «name required edit text».

Note: You might get slightly different results, depending on your screen reader. This was tested in VoiceOver (and NVDA behaves similarly). We’d love to hear about your experiences too.

Note: You can find this example on GitHub as required-labels.html (see it live also). Don’t test the example with 2 or 3 of the versions uncommented — screen readers will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

Common HTML structures used with forms

Beyond the structures specific to web forms, it’s good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form.

Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate element, with elements to contain radio buttons.

Active learning: building a form structure

Let’s put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don’t worry about this for now; you’ll find out how they work in the next article (Basic native form controls). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
2. Apply the CSS to the HTML by adding the following line inside the HTML :

link href="payment-form.css" rel="stylesheet" /> 

h1>Payment formh1> p> Required fields are followed by strong>span aria-label="required">*span>strong>. p> 

section> h2>Contact informationh2> fieldset> legend>Titlelegend> ul> li> label for="title_1"> input type="radio" id="title_1" name="title" value="K" /> King label> li> li> label for="title_2"> input type="radio" id="title_2" name="title" value="Q" /> Queen label> li> li> label for="title_3"> input type="radio" id="title_3" name="title" value="J" /> Joker label> li> ul> fieldset> p> label for="name"> span>Name: span> strong>span aria-label="required">*span>strong> label> input type="text" id="name" name="username" required /> p> p> label for="mail"> span>Email: span> strong>span aria-label="required">*span>strong> label> input type="email" id="mail" name="usermail" required /> p> p> label for="pwd"> span>Password: span> strong>span aria-label="required">*span>strong> label> input type="password" id="pwd" name="password" required /> p> section> 

section> h2>Payment informationh2> p> label for="card"> span>Card type:span> label> select id="card" name="usercard"> option value="visa">Visaoption> option value="mc">Mastercardoption> option value="amex">American Expressoption> select> p> p> label for="number"> span>Card number:span> strong>span aria-label="required">*span>strong> label> input type="tel" id="number" name="cardnumber" required /> p> p> label for="expiration"> span>Expiration date:span> strong>span aria-label="required">*span>strong> label> input type="text" id="expiration" required="true" placeholder="MM/YY" pattern="^(06|11)\/(1)$" /> p> section> 

section> p> button type="submit">Validate the paymentbutton> p> section> 

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

Test your skills!

You’ve reached the end of this article, but can you remember the most important information? You can find a further test to verify that you’ve retained this information before you move on — see Test your skills: Form structure.

Summary

You now have all the knowledge you’ll need to properly structure your web forms. We will cover many of the features introduced here in the next few articles, with the next article looking in more detail at using all the different types of form widgets you’ll want to use to collect information from your users.

See also

Advanced Topics

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example

The Element

The HTML element is used to create an HTML form for user input:

The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The Element

The HTML element is the most used form element.

An element can be displayed in many ways, depending on the type attribute.

Type	Description
	Displays a single-line text input field
	Displays a radio button (for selecting one of many choices)
	Displays a checkbox (for selecting zero or more of many choices)
	Displays a submit button (for submitting the form)
	Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields

The defines a single-line input field for text input.

Example

A form with input fields for text:

This is how the HTML code above will be displayed in a browser:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

The Element

Notice the use of the element in the example above.

The tag defines a label for many form elements.

The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.

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

Radio Buttons

The defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

Checkboxes

The defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

The defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

Example

A form with a submit button:

This is how the HTML code above will be displayed in a browser:

The Name Attribute for

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the «First name» input field:

Источник