CODEWITHSUNDEEP
html
Zarla
Zarla

Reputation: 43

When should the label element be used?

I was learning some HTML and I got confused about use of the label element because I found it in many places, with inputs in a form, with optgroup tag for the sections in a select element, before the textarea elelemt, etc.

So, is there a rule when to use it and when to avoid using it in the wrong way? especially in HTML5?

Upvotes: 3

Views: 1322

Answers (4)

bfavaretto
bfavaretto

Reputation: 71918

The <label> element should be used with form fields: most types of <input>, <select> and <textarea>. If has a for attribute that holds the id of the related element. So, if you click the label, the related element is focused.

Example Usage at Jsbin

<label for="textinput">Enter data here</label>
<input id="textinput>"

<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>

<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>

<label for="select">Select an option</label>
<select id="select">
    <option>Some option</option>
</select>

<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>

In <optgroup> elements, there is a label attribute, which is not the same as the label elements, although its function is similar: identifying a certain group of options:

<select>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
</select>

Upvotes: 2

just so
just so

Reputation: 1138

No, it's not HTML5 exclusive:)

Label could be used in connection with form element such as <input>, <select>, <textarea>. Clicking on label would automatically change focus to connected element.

There are two ways connecting label with element:

  1. Put element inside label
  2. Add for attribute for label, where for value is id of element need to be connected

Example (taken from http://htmlbook.ru/html/label):

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
   <input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
   <input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
   <input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
  </form> 
 </body>
</html>

Upvotes: 0

Sachin
Sachin

Reputation: 40970

Label: This attribute explicitly associates the label being defined with another control.

So the label attribute should use when you want to show some text or label for another controls like textbox, checkbox etc.

And the important thing is

When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

Look at here for the documentation

Upvotes: 1

Andrey Ozornin
Andrey Ozornin

Reputation: 1158

It should be used in forms with other elements only. It can be before, after, or around existing form control. Here's an example by W3Schools.

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

Upvotes: -1

Related Questions