Labels inside or outside text inputs? [duplicate]

1. Should I put input inside label?
2. Does label go before or after input?
3. Can an input have two labels?
4. How do you style a label and input on the same line?

Should I put input inside label?

Don't: Put interactive elements inside labels

Not all screen readers will announce a label correctly if it contains something other than plain text. Also, if someone wants to focus an input by clicking its label, but that label contains a link, they may click the link by mistake.

Does label go before or after input?

When using input elements of “type” checkbox and radio the label element should always be placed after the <input> element. Label elements should be associate with the following form elements: Input type = "text" Input type = "checkbox"

Can an input have two labels?

From the specification: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control. Thus, each form control can be referenced by multiple labels, but each label can only reference one control.

How do you style a label and input on the same line?

Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.