When label tag should be used over span/dev tags in html form?

Question

Hi,

When label tag should be used over span or dev in form?

Example:

option1-span:

<form action="">
<span>Name:</span><input type="text">
<input type="submit" />
</form>

option2-label:

<form action="">
<label>Name:</label><input type="text">
<input type="submit" />
</form>

option3-div:

<form action="">
<div style="display:inline;">Name:</div><input type="text">
<input type="submit" />
</form>

Thanks

Answer 1

This is what label tags are for:

<form action="">
<label for="txt">Name:</label><input type="text" id="txt" name="txt" />
<input type="submit" />
</form>

Then clicking on the label will focus on the input element.

Answer 2

The label tag is primarily used along with the for attribute. This aids in web accessibility of forms. For example

<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" value=""/>
</form>

By using the for tag, we can essentially associate the text "First Name:" with the input field having the name = "firstName".

Aside from that it has other attributes allowed but the span is more regularly used for styling markup.