如何在输入表单顶部对齐标签？

Question

I am struggling with aligning my label with my forms.

This is how I want them:

This is how I've coded it so far, and it's obviously not working.

<label for="email">Email address</label>
    <input type="email" id="email" />

    <label for="password_field">Password </label><span><a href="#">Forgot your password?</a></span>
    <input type="password" id="password_field" />

    <input type="submit" value="Sign in" id="sign_in_form" />

and this is the CSS:

header input[type="email"], header input[type="password"], label {
display:block;
}

I am not sure how to align the labels, furthermore I have the link that is not part of the span that I want to keep next to it. I'm lost.

Could somebody help me?

Answer 1

One way you could do it is to add a wrapping div with a class and adding a little CSS.

HTML:

<div class="inputWrapper">
  <label for="email">Email address</label>
  <input type="email" id="email" />
</div>

<div class="inputWrapper">
  <label for="password_field">Password </label><span>
  <input type="password" id="password_field" />    
</div>

<input type="submit" value="Sign in" id="sign_in_form" />
<a href="#">Forgot your password?</a></span>

CSS:

.inputWrapper label{
  display:block;
}

Here is a quick demo on codepen: http://codepen.io/miguel2k/full/lxopE

Answer 2

Here is one solution: http://jsfiddle.net/yLaxs/

<label for="email">Email address
    <input type="email" id="email" />
</label>
    <label for="password_field">Password <a href="#">Forgot your password?</a>
    <input type="password" id="password_field" />
</label>
<label>
    <br />
    <input type="submit" value="Sign in" id="sign_in_form" />
</label>

and the css

label
{
    float:left;
    width:30%;
}
a
{
    font-size:8px;
}

Answer 3

Working Example

<label for="email">Email address <br/>
<input type="email" id="email" />
</label>
<label for="password_field">Password <a href="#">Forgot your password?</a>
<input type="password" id="password_field" />
</label>
<label>
<br />
<input type="submit" value="Sign in" id="sign_in_form" />
</label>

label
{
float:left;
width:30%;
}

Hope this helps.