How do I format forms so they align vertically? - html

Question

I am trying to create a form for people to contact me but can't get it to look nice. I can't get the forms to align vertically and I also can't get the Message label to display on the top left side of the textarea instead of the bottom left.
<form id="contact" name="contact" method="post">
<label for="name"><br>
Name:</label>
<input type="text" name="name" id="name">
<label for="email"><br>
Email:</label>
<input type="email" name="email" id="email">
<label for="subject"><br>
Subject:</label>
<input type="text" name="subject" id="subject">
<label for="message"><br>
Message:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
</form>

Answer 1

I wouldn't use <br> but if you want to, move it outside of the label and before the input.
Alternatively, set your labels to be displayed as block level items:
label {display: block}
Example: http://jsbin.com/ixurUMU/1/
The reason it's not working how you want it to is that labels aren't block-level elements. They are inline. Meaning they will not in any way trigger a 'line break' by default.

Answer 2

HTML
<form id="contact" name="contact" method="post">
<label for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name">
<label for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email">
<label for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject">
<label for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: block}
Working fiddle
You can also use this
HTML
<form id="contact" name="contact" method="post">
<label class="label" for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name"><br>
<label class="label" for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email"><br>
<label class="label" for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject"><br>
<label class="label" for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea><br>
<label class="label" for="message">
</label>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: inline-block;}
.label
{
display: inline-block;
width: 60px;
}
Fiddle Demo