Cjeffryes13 Cjeffryes13 - 17 days ago 6
HTML Question

Error in HTML form when using <label> tag

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

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.)