displaying html form inputs horizontally - html

Question

i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!

Answer 1

This CSS should work, though I haven't tested:
input { display: inline; }

Answer 2

Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.

Answer 3

Just add display:inline to your input elements, as shown here

Answer 4

Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.