Hopeless inscription html. How to structure HTML forms. The async and defer attributes are ways to execute the script

In its appearance, the label is no different from ordinary text, but thanks to it the user can select the form element by clicking on the text located inside the element rather than the element itself .

Browser support

Attributes

Usage example

To determine which form element the current label belongs to, use the for attribute of the tag ... The value of the for attribute must match the value of the global attribute of the form element to which the label will refer. The for attribute can be omitted if the element will be inside the element .

Let's consider an example of use:

In this example, we:

• Inside the first forms:
  • Posted two radio buttons ( ) to select one of a limited number of options. Note again that for radio buttons inside one form you must specify the same name, the values \u200b\u200bwe specified are different. For the first checked, which indicates that the element should be preselected on page load (in this case, a radio button with a yes value). In addition, we have specified global attributes for the radio buttons that define a unique identifier for the element.
  • Placed two items that define the text labels for our text boxes. Note that we have used the for attribute to determine which form element the current label belongs to. The value of the for attribute corresponds to the value of the global attribute of the radio button we need.
• Inside second forms:
  • Posted two radio buttons ( ) to select one of a limited number of options. For second radio buttons we specified the attribute

The label is bound to a specific input field using an attribute for... It should contain the value of the attribute of the input field to which the label is attached. Also, the label is anchored to an element if this element is placed inside the label tag. In this case, you do not need to specify the for attribute. See examples for better understanding.

By clicking on a tag, those attached to it or will change their state from marked to unchecked and vice versa. In this case, the label is needed for convenience: it is difficult to hit small form elements with the cursor, and it is much easier to hit a long label with text.

An input type text box is bound to the label and will receive input focus. Focus - this is when the cursor blinks in the input field, in this case, if you write something on the keyboard, the text will fall into this field (see the focus pseudo-class for an advanced understanding of focus).

Label label can be used to simulate or. This is necessary in order to make a checkbox or radio with your own design (which is forbidden in CSS, but it is possible with the help of tricky tricks).

Attributes

An example. Checkbox

Let's bind a label to the checkbox using an attribute for... Click on the label and you will see a change in the state of the checkbox from checked to unchecked and vice versa:

I am attached to a checkbox with id checkbox.

An example. Inside label

Now let's not bind the label through the for attribute, but put the elements directly into the label tag, in this case, clicking on the label text will also activate the element:

label

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!