displaying html form inputs horizontally

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!

Solution 1

This CSS should work, though I haven't tested:

input { display: inline; }

Solution 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.

Solution 3

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

Comments

[canbax]

that was short & neat