Should I put input elements inside a label element

Question

Is there a best practice concerning the nesting of label and input HTML elements   classic way    lt label for  myinput  gt My Text lt  label gt   lt input type  text  id  myinput    gt    or   lt label for  myinput  gt My Text     lt input type  text  id  myinput    gt   lt  label gt

User · Answer

As most people have said  both ways work indeed  but I think only the first one should  Being semantically strict  the label does not  contain  the input  In my opinion  containment  parent child  relationship in the markup structure should reflect containment in the visual output  i e   an element surrounding another one in the markup should be drawn around that one in the browser  According to this  the label should be the input s sibling  not it s parent  So option number two is arbitrary and confusing  Everyone that has read the Zen of Python will probably agree  Flat is better than nested  Sparse is better than dense  There should be one-- and preferably only one --obvious way to do it        Because of decisions like that from W3C and major browser vendors  allowing  whichever way you prefer to do it   instead of  do it the right way   is that the web is so messed up today and we developers have to deal with tangled and so diverse legacy code

User · Answer

One thing you need to consider is the interaction of checkbox and radio inputs with javascript   Using below structure    lt label gt     lt input onclick  controlCheckbox    type  checkbox  checked  checkboxState    gt     lt span gt Label text lt  span gt   lt  label gt    When user clicks on  Label text  controlCheckbox   function will be fired once   But when input tag is clicked the controlCheckbox   function may be fired twice in some older browsers  That s because both input and label tags trigger onclick event attached to checkbox   Then you may have some bugs in your checkboxState   I ve run into this issue lately on IE11  I m not sure if modern browsers have troubles with this structure

User · Answer

Both are correct  but putting the input inside the label makes it much less flexible when styling with CSS   First  a  lt label gt  is restricted in which elements it can contain  For example  you can only put a  lt div gt  between the  lt input gt  and the label text  if the  lt input gt  is not inside the  lt label gt    Second  while there are workarounds to make styling easier like wrapping the inner label text with a span  some styles will be in inherited from parent elements  which can make styling more complicated

User · Answer

I usually go with the first two options  I ve seen a scenario when the third option was used  when radio choices where embedded in labels and the css contained something like  label input       vertical-align  bottom      in order to ensure proper vertical alignment for the radios

User · Answer

The primary advantage of placing input inside of label is typing efficiency for humans and byte storage for computers    Znarkus said in his comment to the OP           One of the big pros of putting the  lt input   gt  inside the  lt label gt   is that you can omit for and id   lt label gt My text  lt input   gt  lt  label gt  in your example  So much nicer       Note  In  Znarknus code  another efficiency was included not explicitly stated in the comment  type  text  can also be omitted and input will render a text box by default   A side by side comparison of keystrokes and bytes 1    31 keystrokes  31 bytes   lt label gt My Text lt input   gt  lt  label gt    58 keystrokes  58 bytes   lt label for  myinput  gt My Text lt  label gt  lt input id  myinput    gt    Otherwise  the snippets are visually equal and they offer the same level of user accessibility  A user can click or tap the label to place the cursor in the text box    1  Text files   txt  created in Notepad on Windows  bytes from Windows File Explorer properties

User · Answer

If you include the input tag in the label tag  you don t need to use the  for  attribute   That said  I don t like to include the input tag in my labels because I think they re separate  not containing  entities

User · Answer

I prefer   lt label gt    Firstname    lt input name  firstname    gt   lt  label gt    lt label gt    Lastname    lt input name  lastname    gt   lt  label gt    over   lt label for  firstname  gt Firstname lt  label gt   lt input name  firstname  id  firstname    gt    lt label for  lastname  gt Lastname lt  label gt   lt input name  lastname  id  lastname    gt    Mainly because it makes the HTML more readable  And I actually think my first example is easier to style with CSS  as CSS works very well with nested elements   But it s a matter of taste I suppose     If you need more styling options  add a span tag    lt label gt     lt span gt Firstname lt  span gt     lt input name  firstname    gt   lt  label gt    lt label gt     lt span gt Lastname lt  span gt     lt input name  lastname    gt   lt  label gt    Code still looks better in my opinion

User · Answer

Behavior difference  clicking in the space between label and input  If you click on the space between the label and the input it activates the input only if the label contains the input   This makes sense since in this case the space is just another character of the label    x000D   x000D   lt p gt Inside  lt  p gt  x000D   x000D   lt label gt  x000D     lt input type  checkbox    gt  x000D      amp lt ----- Label  Click between me and the checkbox  x000D   lt  label gt  x000D   x000D   lt p gt Outside  lt  p gt  x000D   x000D   lt input type  checkbox  id  check    gt  x000D   lt label for  check  gt   amp lt ----- Label  Click between me and the checkbox  lt  label gt  x000D   x000D   x000D    Being able to click between label and box means that it is    easier to click less clear where things start and end   Bootstrap checkbox v3 3 examples use the input inside  http   getbootstrap com css  forms Might be wise to follow them  But they changed their minds in v4 0 https   getbootstrap com docs 4 0 components forms  checkboxes-and-radios so I don t know what is wise anymore      Checkboxes and radios use are built to support HTML-based form validation and provide concise  accessible labels  As such  our  lt input gt s and  lt label gt s are sibling elements as opposed to an  lt input gt  within a  lt label gt   This is slightly more verbose as you must specify id and for attributes to relate the  lt input gt  and  lt label gt     UX question that discusses this point in detail  https   ux stackexchange com questions 23552 should-the-space-between-the-checkbox-and-label-be-clickable

User · Answer

I greatly prefer to wrap elements inside my  lt label gt  because I don t have to generate the ids    I am a Javascript developer  and React or Angular are used to generate components that can be reused by me or others  It would be then easy to duplicate an id in the page  leading there to strange behaviours

User · Answer

See http   www w3 org TR html401 interact forms html h-17 9 for the W3 recommendations   They say it can be done either way  They describe the two methods as explicit  using  for  with the element s id  and implicit  embedding the element in the label    Explicit        The for attribute associates a label with another control explicitly  the value of the for attribute must be the same as the value of the id attribute of the associated control element    Implicit        To associate a label with another control implicitly  the control element must be within the contents of the LABEL element  In this case  the LABEL may only contain one control element

User · Answer

From w3   The label itself may be positioned before  after or around the associated control     x000D   x000D   lt label for  lastname  gt Last Name lt  label gt   lt input type  text  id  lastname    gt  x000D   x000D   x000D   or  x000D   x000D   lt input type  text  id  lastname    gt   lt label for  lastname  gt Last Name lt  label gt  x000D   x000D   x000D   or  x000D   x000D   lt label gt      lt input type  text  name  lastname    gt     Last Name  lt  label gt  x000D   x000D   x000D   Note that the third technique cannot be used when a table is being used for layout  with the label in one cell and its associated form field in another cell  Either one is valid  I like to use either the first or second example  as it gives you more style control

User · Answer

Personally I like to keep the label outside  like in your second example   That s why the FOR attribute is there   The reason being I ll often apply styles to the label  like a width  to get the form to look nice  shorthand below     lt style gt  label     width  120px    margin-right  10px     lt  style gt    lt label for  myinput  gt My Text lt  label gt   lt input type  text  id  myinput    gt  lt br   gt   lt label for  myinput2  gt My Text2 lt  label gt   lt input type  text  id  myinput2    gt    Makes it so I can avoid tables and all that junk in my forms

User · Answer

Referring to the WHATWG  Writing a form s user interface  it is not wrong to put the input field inside the label  This saves you code because the for attribute from the label is no longer needed

User · Answer

A notable  gotcha  dictates that you should never include more than one input element inside of a  lt label gt  element with an explicit  for  attribute  e g    lt label for  child-input-1  gt     lt input type  radio  id  child-input-1   gt     lt span gt  Associate the following text with the selected radio button   lt  span gt     lt input type  text  id  child-input-2   gt   lt  label gt    While this may be tempting for form features in which a custom text value is secondary to a radio button or checkbox  the click-focus functionality of the label element will immediately throw focus to the element whose id is explicitly defined in its  for  attribute  making it nearly impossible for the user to click into the contained text field to enter a value   Personally  I try to avoid label elements with input children  It seems semantically improper for a label element to encompass more than the label itself  If you re nesting inputs in labels in order to achieve a certain aesthetic  you should be using CSS instead

[html] Should I put input elements inside a label element?

Examples related to html

Examples related to semantics