Friday, October 12, 2007

CSS: Styling a form

I found a good tutorial on CSS styling of a form : Tabless Forms

Here is a mini tutorial based on the above mentioned article:

Step 1:

Let's make a basic form first:

<form>
<input name="email" /><br />
<input name="password" /><br />
<input type="submit" name="submit" value="Login" />
</form>

Step 2:

Now, Let's add some labels:

<form>
<label for="email">Email:</label>
<input name="email" id="email" /><br />
<label for="password">Password:</label>
<input name="password" id="password" /><br />
<label for="submit">&nbsp;</label>
<input type="submit" name="submit" id="submit" value="Login" />
</form>

Step 3:
time to style the form, first we use a basic CSS :
<style>
label, input { display:block; float:left;}
br {clear:left;}
</style>

Step 4:
What left now is, to specify a width for the labels and right justify them, also put some padding and margins to make it look nicer, here are the modified CSS for that task:

label, input { display:block; float:left; margin-bottom:10px;}
label {width:75px; text-align:right; padding-right:10px;}
br {clear:left;}


1 comment:

Angelo Chen said...

seems no need to use display:block, here is another basic CSS for form:
<style>
label, input {float:left}
label {width:100px; text-align:right;}
br {clear:left;}
</style>