Should I use the label in the product register form?-CodePudding

input & label
I know the reason for using it is because of the dependency. Is it correct to write the above photo in this label & input ???

I am working on the product registration page

<label>
  {label && <span>address</span>}
  <input type={type} placeholder={placeholder} /> 
</label>

I think it should be written in span & input ex)

<div>
 {label && <span>address</span>}
<input type={type} placeholder={placeholder} />
<div>

CodePudding user response：

Semantically you want the label to reference the input, or rather, for the input to gain focus by interacting with the label. This is done for accessibility.

You get this behavior by default when wrapping an input with a label element. This is correct.

<label>
  {label && <span>address</span>}
  <input type={type} placeholder={placeholder} /> 
</label>

The second is not technically correct semantic HTML since you are rendering what is effectively a label but not coding it as such.

If the issue is that label elements are inline and you want the block display of a div then either apply CSS to your label elements or wrap both the label and input in a div.

CodePudding user response：

Having a label wrapped around the input allows you to click on the label and focus the input. Its especially useful when having to click radio buttons.