The look is so important for a form. Unfortunately almost all forms look so boring and standard. Luckily it is pretty easy to style a login form with css.

The old way…

Login forms are pretty usual at web sites, but they are very often very bad looking… This is a good example on a standard way to do a login form. (Don’t worry, we will make this form look better soon…)

login1

This is the HTML code for this form:
<form id=”login”><br />
Username: <input type=”text” name=”user” /><br />
Password: <input type=”password” name=”password” /><br />
<input type=”submit” value=”Submit” name=”Submit” /><br />
</form>

It doesn’t look that sexy, right?! :-(
And it often look like this when you login at sites…

We make it look better

A simple thing is to put the form on one row, like this:
login2

What we did to create this is simply remove the <br> after the input’s.
Starting to look a little bit better, but still extremely boring right…

What about a little color and stuff like this?

login3

Nothing hard, but it directly looks so much better.
To do this, change the style sheet into this:
#login {
background-color: #DDDDDD;
color: #000000;
border: 1px solid #777777;
font-family: Verdana;
font-size: 10px;
text-align: right;
width: 440px;
margin: 2px;
}

This styles the form that we created, because it has id=”login”.
It should be pretty obvious what it does, so just read the stylesheet.

The next thing we do is style the inputs and the submit button with this style sheet:

#login .theInput {
font-family: Verdana;
font-size: 11px;
width: 110px;
margin-right: 5px;
}

#login .theSubmit {
font-family: Verdana;
font-size: 10px;
background-color: #333333;
color: #FFFFFF;
margin-right: 5px;
}

And make some small changes to the html, adding classes to the inputs and button:
<form id=”login”> Username: <input type=”text” class=”theInput” name=”user” />
Password: <input type=”password” class=”theInput” name=”password” />
<input type=”submit” name=”Submit” value=”Submit” />
</form>

The result looks like this:

login5

It’s beautiful right :-)

There are so many more things you can do, but start playing around with this form and create your own designs. Small things like changing the standard text fonts and sizes make big differences. It directly looks more professional. You can also replace the submit button with an image for creating even more unique design.

Until next time… happy form-ing!

Similar Posts: