How to put web form elements on a new line? - html

Question

How to place "input" elements on new lines? In the above example all elements are placed sequentially, ie lable->input->lable->input, etc.
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-size:11px;
font-weight:bold;
text-align:right;
float:left;
}
#stylized input{
float:left;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>

Answer 1

#stylized input{
display: block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
This will put every input on a new line.
- Removed "float: left", added "display: block".

Answer 2

I put them under list tags and it worked without changing styles and using a break tag is obsolete
<ul>
<li><input type = "text" name = "selection" value = "text1" /> Text1</li>
<li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>

Answer 3

Have you tried anything as simple as
<label>Name: </label><br>
<input type="text" name="name" id="name"/>
<label>Email: </label><br>
<input type="text" name="email" id="email"/>

Answer 4

My guess is user1359163's anwswer will help, though you might care to know why: using float effectively removes the element out of the document's normal flow, a bit like changing the z-index, allowing the element to flow over div borders, labels, spans and... 'ignore' clear styles.
The element behaves as if it floats over the other elements, so in that respect, it stays clear of the left and right of all other elements that don't float.
I'm no CSS expert, but this way of looking at it has helped me a lot in solving issues with mangled layouts I've encountered when using the float, clear and z-index styles.

Answer 5

You prevent new lines when selecting a floating layout with enough room for all elements.
Try this:
Sample
http://jsfiddle.net/8yZff/
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}

Answer 6

Here is JsFiddle for that...
Edit :
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
display:block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}​

Answer 7

For tabular data, such as an array of label/field pairs, use a table. You will find styling much easier, and nonstyled appearance much better.