What does for attribute do in HTML label tag

Question

I wonder what is the difference between the following two code snippets   lt label gt Input here    lt  label gt   lt input type  text  name  theinput  id  theinput   gt   and  lt label for  theinput  gt Input here    lt  label gt   lt input type  text  name  theinput  id  theinput   gt   I m sure it does something when you use a special JavaScript library  but apart from that  does it validate the HTML or required for some other reason

User · Answer

In a nutshell what it does is refer to the id of the input  that s all    lt label for  the-id-of-the-input  gt Input here  lt  label gt   lt input type  text  name  the-name-of-input  id  the-id-of-the-input  gt

User · Answer

The for attribute associates the label with a control element  as defined in the description of label in the HTML 4 01 spec  This implies  among other things  that when the label element receives focus  e g  by being clicked on   it passes the focus on to its associated control  The association between a label and a control may also be used by speech-based user agents  which may give the user a way to ask what the associated label is  when dealing with a control   The association may not be as obvious as in visual rendering    In the first example in the question  without the for   the use of label markup has no logical or functional implication     it   s useless  unless you do something with it in CSS or JavaScript   HTML specifications do not make it mandatory to associate labels with controls  but Web Content Accessibility Guidelines  WCAG  2 0 do  This is described in the technical document H44  Using label elements to associate text labels with form controls  which also explains that the implicit association  by nesting e g  input inside label  is not as widely supported as the explicit association via for and id attributes

User · Answer

The for attribute shows that this label stands for related input field  or check box or radio button or any other data entering field associated with it  for example  lt li gt       lt label gt  translate blindcopy  lt  label gt       lt a class  quot  quot  href  quot   quot  title  quot  translate savetemplate  quot  onclick  quot  quot   gt  lt i class  quot fa fa-list quot  class  quot button quot   gt  lt  i gt  lt  a gt   amp nbsp               lt input type  quot text quot  id  quot BlindCopy quot  name  quot BlindCopy quot  class  quot splitblindcopy quot    gt    lt  li gt

User · Answer

It labels whatever input is the parameter for the for attribute    x000D   x000D   lt input id  myInput  type  radio  gt  x000D   lt label for  myInput  gt My 1st Radio Label lt  label gt  x000D   lt br gt  x000D   lt input id  input2  type  radio  gt  x000D   lt label for  input2  gt My 2nd Radio Label lt  label gt  x000D   lt br gt  x000D   lt input id  input3  type  radio  gt  x000D   lt label for  input3  gt My 3rd Radio Label lt  label gt  x000D   x000D   x000D

User · Answer

Using label for  in html form This could permit to visualy dissociate label s  and object while keeping them linked  Sample  there is a checkbox and two labels  You could check uncheck the box by clicking indifferently on any label or on box  but not on text nor on input content     x000D   x000D   lt label for  demo1  gt  There is a label  lt  label gt   lt br   gt  Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Duis sem velit  ultrices et  fermentum auctor  rhoncus ut  ligula  Phasellus at purus sed purus cursus iaculis  Suspendisse fermentum  Pellentesque et arcu  Maecenas viverra  In consectetuer  lorem eu lobortis egestas  velit odio imperdiet eros  sit amet sagittis nunc mi ac neque  Sed non ipsum  Nullam venenatis gravida orci   lt br   gt   lt label for  demo1  gt  There is a 2nd label  lt  label gt   lt input id  demo1  type  checkbox  gt Demo 1 lt  input gt  x000D   x000D   x000D   Some useful tricks By use stylesheet CSS power  you could do a lot of interresting things     x000D   x000D   demo2 checked    but2 before   content   Des      demo2 checked    box2 before   content          but2 before   content   S      box2 before   content          demo1 checked    but1 before   content   Des      demo1 checked    box1 before   content          but1 before   content   S      box1 before   content         x000D   lt input id  demo1  type  checkbox  gt Demo 1 lt  input gt   lt input id  demo2  type  checkbox  gt Demo 2 lt  input gt   lt br   gt   lt label for  demo1  class  but1  gt elect 2 lt  label gt  -   lt label for  demo2  class  but2  gt elect 1 lt  label gt   lt br   gt  Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Duis sem velit  ultrices et  fermentum auctor  rhoncus ut  ligula  Phasellus at purus sed purus cursus iaculis  Suspendisse fermentum  Pellentesque et arcu  Maecenas viverra  In consectetuer  lorem eu lobortis egestas  velit odio imperdiet eros  sit amet sagittis nunc mi ac neque  Sed non ipsum  Nullam venenatis gravida orci   lt br   gt   lt label for  demo1  class  but1  gt elect this 2nd label  lt  label gt  -   lt label class  but2  for  demo2  gt elect this another 2nd label  lt  label gt   lt br   gt   lt label for  demo1  class  box1  gt  check 1 lt  label gt   lt label for  demo2  class  box2  gt  check 2 lt  label gt   x000D   x000D   x000D

User · Answer

The for attribute of the  lt label gt  tag should be equal to the id attribute of the related element to bind them together

User · Answer

The  lt label gt  tag allows you to click on the label  and it will be treated like clicking on the associated input element  There are two ways to create this association   One way is to wrap the label element around the input element    lt label gt Input here       lt input type  text  name  theinput  id  theinput  gt   lt  label gt    The other way is to use the for attribute  giving it the ID of the associated input    lt label for  theinput  gt Input here  lt  label gt   lt input type  text  name  whatever  id  theinput  gt    This is especially useful for use with checkboxes and buttons  since it means you can check the box by clicking on the associated text instead of having to hit the box itself   Read more about this element in MDN

[html] What does "for" attribute do in HTML <label> tag?

Examples related to html

Examples related to forms

Examples related to input

Examples related to label

Examples related to for-attribute