HTML - Label

About

The label 1) html element represents a caption for a control item in a form (user interface).

Syntax

With the id and for attributes

<label for="username">The name of the user: </label>
<input type="text" id="username">

Without

<label>The name of the user: <input type="text"></label>

Click

A click on the label:

  • will bring focus on the control element.
  • propagates to the control element.

Focus

Demo for the focus

  • The HTML
<label for="username">Click me to focus on the input: </label>
<input type="text" id="username">

Propagation

Demo for the propagation. When you click on the label, the checkbox is checked/unchecked

  • The HTML
<label for="checkbox">Click on me to check/uncheck the checkbox</label>
<input id="checkbox" type="checkbox" />
  • The result: click on the label

Documentation / Reference





Discover More
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - Label

The label html element represents a caption for a control item in a form (user interface). idfor A click on the label: will bring focus on the control element. propagates to the control element....
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
Html Input File Multiple Warning Dialog
How to work with an Input File in an HTML form?

The input file is an input of type file that permits to select files or directory and send them to the browser file system api HTML HTML The HTML Result from the operating system: This...
Auto Placed Form
How works CSS grid Auto-placement ?

In a grid, the value auto : will place the Css grid item into the next available empty grid cell (growing the grid if there’s no space left) is driven by the placement algorithm is controlled...
What are Form Control elements in HTML ?

control form elements are elements that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit it or reset it field set [optional]...
What is an HTML Form?

form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken from the...



Share this page:
Follow us:
Task Runner