CSS form design without tables

. Monday, June 30, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family
: Arial, Verdana, sans-serif;
}

form p
{
clear
: both;
}

fieldset
{
width
: 350px;
border
: 1px solid #ccc;
}

legend
{
font-weight
: bold;
font-size
:1.2em;
}

label
{
font-weight
: bold;
width
: 120px;
float
: left;
}

input[type=text]
{
width
: 200px;
}

textarea
{
width
: 200px;
height
: 100px;
}

input[type=submit], input[type=reset]
{
font-size
: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.
<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>

5 comments:

Jessica said...

your code is very clean. nice blog btw :)

Anonymous said...

very nice and quick tutorial. i am new to css, but it seems its worth learning. publish more tuts on css dude ;)

Anonymous said...

nice post

md said...

Hi Fahad!!
You have a nice blog!
On the front page of your blog,i saw that tabbed navigation thing.Can you please post an article about how to do that.I would be very obliged.
With Regards,
Md
(www.computer-mpire.blogspot.com)

Fahad Ibnay Heylaal said...

i am currently using a template from bTemplates. but i will post a tutorial on how to make a tabbed navigation thing(!) with jQuery soon.