Error in HTML form when using <label> tag

Question

I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.

my HTML:

<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>

CSS:

label
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

input
{
    border:0; 
    padding:5px; 
    font-size:0.7em; 
    color:#aaa; 
    border:solid 1px #ccc; 
    margin:0 0 5px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    width: 160px ;
}

textarea
{
    border:0; 
    padding:5px; 
    font-size:0.7em; 
    color:#aaa; 
    border:solid 1px #ccc; 
    margin:0 0 5px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    width: 160px ;
}

input:focus
{ 
    border:solid 1px #EEA34A; 
}

Answer 1

You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See @verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.

But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:

form
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)

Answer 2

The written form is not correct, 'cos the entire form is wrapped in Label when conventionally set so

<form action="">
  <div> <label for=""> </ label> </ div>
  <div> <input type="text"> </ div>
</form>

Which is possible without the div

Answer 3

This is how you should use Label tag

<form action="demo_form.asp">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br>
    <input type="submit" value="Submit">
</form>

Answer 4

To resolve this issue you need to modify html part.

You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.

Regards,
Vishal Bagdai

Answer 5

Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).

See: http://www.w3schools.com/tags/tag_label.asp

Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:

#divID
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

or give it a class (eg. divClass) and change your css to:

.divClass
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}