Proper way to have a break between the form - css

Question

Above is a Form. There are different methods to get the following form above, with the input and text seperated on different lines.
One is to use < br / > and another use fieldset, p-tag, etc.
But I am wondering what the proper way is to seperate the form different things in different lines?

Answer 1

The easiest way is simply:
label, input {
display: block;
}
Edited to add the content of a comment made below, from myself to the OP, since it seems pertinent to the answer:
The 'best' is a very subjective measure. The 'best' is simply the easiest way to achieve your end-result, ideally without mangling the semantics of the HTML. Using div elements in forms gives no meaning to the contained elements, or their relationship to each other.
Using a fieldset gives some idea of the relationship, but typically (possibly should, but I'm unsure) is used to group elements together, rather than simply style them. I'd argue my method is 'best' simply because it relies on no additional (meaningful or meaningless) HTML elements being added to the page.

Answer 2

There are no fast rules. HTML5 seems to favor using the p element, see its example on it. By old HTML specifications, p means a paragraph, but HTML5 defines a paragrapg as virtually any block of inline content.
In practice, it is best to select the markup according to the desired default rendering. If you prefer no vertical spacing, use br or div (in the latter, you would wrap each line in a div element, making it easier to style it if desired). If you prefer spacing (empty lines), use p. Using a table is one possibility but unnecessarily complicated in a simple case like this.

Answer 3

Using <br/> tags to control layout is not recommended. This tag should only use to break a line in a paragraph. Using it for layout purposes is lazy and bad practice.
The best way to create forms in general like the above is to use a <ul> list.
<form>
<ul>
<li>
<label for="firstname">Name</label>
<input name="firstname" type="text" />
</li>
<li>
<label for="surname">Surname</label>
<input name="surname" type="text" />
</li>
</ul>
</form>
This is considered by many the "proper" way of doing it.
Then you can style your list in whichever way you like, so depending on the css the label can be above or next to the input field (this is where the <br/> tag would spoil that).
The basic style you need to apply is:
form ul {
list-style-type:none;
}
This gets rid of the bullet points in the list. Then you can e.g. set the elements inside to block or make them float.

Answer 4

I would use <div> tags and position them manually with CSS. You can also use the clear:both within CSS. I have used <br /> before as well. You do not want to be using <p> tags though because it will confuse the Google Bot which crawls your website to place you on Google Search, from a SEO point of view <p> is bad unless you actually have content within the tags.
Tables may also look a good option but here is a good article on why you should not use tables for layout http://phrogz.net/css/WhyTablesAreBadForLayout.html

Answer 5

Ain't nothing wrong with using br's, though the cleanest way is to just make those items display:block.
http://jsfiddle.net/chad/MdbKE/

Answer 6

Quite semantic way to markup label/field pairs is to use DL list (for example, this is used by default in Zend_Form). For submit button, DIV can be used:
<dl>
<dt><label for="frm-login-username">Username</label></dt>
<dd><input type="text" name="username" id="frm-login-username" /></dd>
<dt><label for="frm-login-password">Username</label></dt>
<dd><input type="password" name="password" id="frm-login-password" /></dd>
</dl>
<div><input type="submit" value="Login" /></div>