Creating a CSS TableLess Form (using Labels or DIVs)

Posted on September 1, 2008, under HTML & CSS 

Greetings,

This article is about creating a form without using any tables, which can be easily customized and used in your own site. Let’s start creating the necessary files: tableless_form.html & style.css. You can choose between two structures: one using DIVs & another one using labels.

Step 1: Creating the CSS file

We will create and place the CSS file in the same folder where the tableless_form.html file is located. Here’s the file’s content:

First Method (with DIVs)

html, body
{
padding: 0;
border: 0px none;
}

/* Let's add some style to our fieldset & legend */

fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}

fieldset legend
{
border: 1px #1a6f93 solid;
color: black; 

font-family: Verdana;
font-weight: none;
font-size: 13px;

padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;

-moz-border-radius: 3px;
}

/* Main DIV */
.m
{
width: 560px;
padding: 20px;
height: auto;
}

/* Left DIV */
.l
{
width: 140px;
margin: 0px;
padding: 0px; 

float: left;
text-align: right;
}

/* Right DIV */
.r
{
width: 300px;
margin: 0px;
padding: 0px; 

float: right; 

text-align: left;
}

.a
{
clear: both;
width: 470px;
padding: 10px;
}

Second method (With Labels)

HTML, BODY
{
padding: 0;
border: 0px none;
}

/* Let's add some style to our fieldset & legend */

fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}

fieldset legend
{
border: 1px #1a6f93 solid;
color: black; 

font-family: Verdana;
font-weight: none;
font-size: 13px;

padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;

-moz-border-radius: 3px;
}

/* Label */
label
{
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: left;
}

/* Input, Textarea */
input, textarea
{
margin: 5px;
padding: 0px;
float: left;
}

/* BR */

br
{
clear: left;
}



Step 2: Creating the HTML page

Let’s create the tableless_form.html page which has a sample registration form inside it.

First Method (width DIVs)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>

<TITLE>TableLess Form</TITLE>
<META name="Author" Content="Bit Repository">

<META name="Keywords" Content="form, divs">
<META name="Description" Content="A CSS Tableless Form Design">
<link rel="stylesheet" type="text/css" href="style.css" />

</HEAD>

 <BODY>
 
<center>

<div class="m">

<form name="register" method="post" action="">

<fieldset><legend>Member Registration</legend>

<div class="a"> <div class="l">Your name</div><div class="r"><INPUT type="text" name="name"></div></div>

<div class="a"> <div class="l">E-Mail</div><div class="r"><INPUT type="text" name="email"></div></div>

<div class="a"> <div class="l">Password</div><div class="r"><INPUT type="password" name="password"></div></div>

<div class="a"> <div class="l">Confirm password</div><div class="r"><INPUT type="password" name="confirm_password"></div> </div>

<div class="a"> <div class="l">Comments (optional)</div><div class="r"><TEXTAREA NAME="message" ROWS="5" COLS="25"></TEXTAREA></div></div>

<div class="a"> <div class="l">&nbsp;</div> <div class="r"><INPUT type="checkbox" name="i_agree" value="1"> I agree to the terms & conditions</div></div>

<div class="a"> <div class="l">&nbsp;</div> <div class="r"><INPUT class="button" type="submit" name="submit" value="Send Message"></div></div>

<div class="a"></div>

</fieldset>

</form>

</div>

</center>

 </BODY>
</HTML>

A row is using 3 DIVs: a, l & r. Here’s an example:

<div class="a">
<div class="l">Your name</div><div class="r"><INPUT type="text" name="user_name"></div>
</div>

The text and the input is placed inside an area div (called ‘a’). The left side (which contains the text) & the right side (which has the form object: text, textarea etc.) are both placed inside 2 DIVs (‘l’ and ‘r’).

Second Method (with Labels)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>TableLess Form</TITLE>
  <META name="Author" Content="Bit Repository">

  <META name="Keywords" Content="form, divs">
  <META name="Description" Content="A CSS Tableless Form Design">

<link rel="stylesheet" type="text/css" href="style.css" />

</HEAD>

 <BODY>

<center>

<div align="left" style="width: 500px;">

<form name="register" method="post" action="">
<fieldset><legend>Member Registration</legend>

<label>Username</label><input type="text" name="name"><br />

<label>E-Mail</label><input type="text" name="email"><br />

<label>Password</label><input type="password" name="password"><br />

<label>Confirm password</label><input type="password" name="confirm_password"><br />

<label>Comments (optional)</label><textarea name="message" rows="5" cols="25"></textarea><br />

<label>&nbsp;</label><input type="checkbox" name="i_agree" value="1">I agree to the terms & conditions<br />

<label>&nbsp;</label><input type="submit" name="submit" value="Send Message"><br />

</center>

</fieldset>

</form>

</div>

 </BODY>
</HTML>

As you can see, the second structure, using labels, has less code then the first:

<label>Your name</label><input id="name" type="text" name="name"><br />

The ‘clear’ property from <br /> has the value ‘left’. This indicates that no floating elements are allowed in the left side of our element. Therefore, the new row (with text and input) will be under the current one.

FIREFOX 3.03

SAFARI 3.1.2

Any comments & suggestions regarding this post are welcomed.

Comment via Facebook

comments

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.