Tableless forms

I consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. More and more web designers work very much with styles in order to create a unique and easy to maintain website. You can see some inspirational examples by visiting a gallery like CSSREMIX or cssdrive. Those are CSS galleries that won't showcase just any kind of website. The design must be unique, CSS based, valid, XHTML etc. It's a great starting point if you're into learning to design. What makes a CSS style design so important? Well...I'll start by telling you that it's damn easy to maintain the design of your website, re-design it when you get mad, fin-tune it or whatever. Just by changing a line of code in your stylesheet can affect all pages from your website. All of them will reflect that line you changed. You won't have to edit every single page by as it will be automatically done by your stylesheet. You just need to apply classes to your page elements and than you will have to style those classes. Ok so we're done with the introduction. Let's talk about the CSS forms. This is a very important aspect since I don't think there is a website without a form in this "world". Our users spend a big amount of time filling forms so why not offer them a user friendly alternative. If someone would ask me what are the most 5 important things that a website must have (and in the right way) to succeed I would mention the forms among others like an easy navigation, good search engine, well chosen colors and fonts and, of course, good and quality content. You can chose for a fast layout made with tables, labels on the left and inputs on the right saying that it's just a form or you can chose to help your visitor filling that form, to make him feel good and be fast (I hate forms by the way so if I can do it faster it's better), to help them with tooltips or a "as you type" validation (I would normally do this via Ajax) or something related. Yes, this is a big step for your visitor not to leave the page where you request payment details for example. I would suggest any website owner to ask (and this is done when you get very familiar with your design and you're just blind like I get sometimes...you know the situation - when you're the only one that likes something and that's because you made it lol) their visitors to leave feedback. At least while you're in BETA or whatever. Collect impressions and opinions, let your visitors, who see and interact with your design for the first time, offer you a true and honest impression. See the results. If there's a single input on your page that would make a visitor go "what the...abba..bu...hmmm?..oh..I got it..maybe it's this..." than it's not good enough. Your job is not over yet. He's unsure. He might leave. He's lost... My point with this is that it's almost crucial to have a help for your forms. Some type of info. Let's take for example a registration page. You ask them to chose a username and a password which must be entered twice to be confirmed. If you need or want a higher level of security you will ask for a password that has letters and at least 3 numbers and which must be somewhere between 5 and 12 characters but you don't mention to the applicant that they have to enter numbers too (I've seen this on many websites). Your visitor will fail to provide a good (matching type of) password and your page will show an error. Going once, going twice...gone! Enough with the introductions and with my point of view about forms and let's build some. We will start by defining some basic elements and apply styles.

body {
	background-color:#F7F7F7;
}
fieldset {
	border:1px dashed #CCC;
	padding:10px;
}
legend {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 90%;
	letter-spacing: -1px;
	font-weight: bold;
	line-height: 1.1;
	color:#fff;
	background: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}
h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 175%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#333;
}
label {
	width:142px;
	height:32px;
	margin-top:3px;
	margin-right:2px;
	padding-top:11px;
	padding-left:6px;
	background-color:#CCCCCC;
	float:left;
	display: block;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 115%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#666;
}
.form {
	margin:0;
	padding:0;
}
#container {
	width:750px;
	margin:auto;
	padding:10px;
}
#top {
	width:680px;
	height:50px;
}
#leftSide {
	width:530px;
	padding-top:30px;
	float:left;
}
#rightSide {
	background-color:#fff;
	width:200px;
	padding:5px;
	margin-top:40px;
	float:right;
	border:1px solid #CCC;
	font:normal 12px Arial;
	color:#666666
}
.clear {
	clear:both;
}
.holder {
	background-color:#fff;

}
.div_texbox {
	width:347px;
	float:right;
	background-color:#E6E6E6;
	height:35px;
	margin-top:3px;
	padding-top:5px;
	padding-bottom:3px;
	padding-left:5px;
}

.textbox {
	background-image: url(images/16t.png);
	background-repeat: no-repeat;
	background-position:left;
	width:285px;
	font:normal 18px Arial;
	color: #999999;
	padding:3px 5px 3px 19px;
}
.textbox:focus, .textbox:hover {
	background-color:#F0FFE6;
}

.username {
    	background-image: url(images/16m.png);
    	background-repeat: no-repeat;
    	background-position:left;
	width:285px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.username:focus, .username:hover {
	background-color:#F0FFE6;
}
   
.password {
    	background-image: url(images/16s.png);
    	background-repeat: no-repeat;
   	background-position:left;
	width:285px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.password:focus, .password:hover {
	background-color:#F0FFE6;
}

.button_div {
	width:287px;
	float:right;
	background-color:#fff;
	border:1px solid #ccc;
	text-align:right;
	height:35px;
	margin-top:3px;
	padding:5px 32px 3px;
}
.buttons {
	background: #e3e3db;
	font-size:12px; 
	color: #989070; 
	padding: 6px 14px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff #d8d8d0 #d8d8d0 #fff;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:bold;
}

We have created the styles so what we need now would be the form that will collect our data. Here it is...

<div id="container">
  <div id="top">
    <h1>Please complete the form below</h1>
  </div>
  <div id="leftSide">
  <fieldset>
<legend>Login details</legend>
<form action="login.php" method="POST" class="form">
  <label for="username">Username</label>
    <div class="div_texbox">
    <input name="username" type="text" class="username" id="username" value="username" />
	</div>
	 <label for="password">Password</label>
    <div class="div_texbox">
    <input name="password" type="password" class="password" id="password" value="password" />
	</div>
	<div class="buuton_div">
	<input name="Submit" type="button" value="Submit" class="buttons" />
	</div>
</form>
	</fieldset>
	<br /><hr size="1"><br />
  <fieldset>
<legend>Personal details</legend>
<form action="pay.php" method="POST" class="form">
	<label for="name">Name</label>
    <div class="div_texbox">
    <input name="name" type="text" class="textbox" id="name" value="John Doe" />
	</div>
	<label for="address">Address</label>
	<div class="div_texbox">
    <input name="address" type="text" class="textbox" id="address" value="12 main" />
	</div>
	<label for="city">City</label>
	<div class="div_texbox">
    <input name="city" type="text" class="textbox" id="city" value="Rochester" />
	</div>
	<label for="country">Country</label>
	<div class="div_texbox">
    <input name="country" type="text" class="textbox" id="country" value="United States" />
	</div>
	<div class="button_div">
	<input name="Submit" type="button" value="Submit" class="buttons" />
	</div>
</form>
	</fieldset>
  </div>
  <div id="rightSide">
  <p><u>This is the right side div that can be used for showing info's in order to help the visitor.</u> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p></div>
  <div class="clear"></div>
</div>

Notice that we used a class named "clear". It will help us to clear the floats otherwise our floating elements will break the layout and the container will not go around to close them. I can't say that the methods I've used are the best ones but I can, at least, hope that they will be a good starting point/example for you to understand some basic elements used in our examples below. Why margin and no padding, why floating etc. I also suggest Macromedia Dreamweaver 8 which, different from the previous one (Dreamweaver Mx 2004) has more support for DIV's, layers and other elements making them more visible and easier to select when you're in design mode. The padding is also visible. It's so easy to understand using this program. You can download a free trial on the Adobe website. This is a basic layout, you can use your imagination and change it to suit your needs and taste. Here's an output for example1 and for example2. Download links lower on the page. Thank you for reading this, Mihalcea Romeo Update: Works on Safari 1.2 and 1.3 now, Firefox 1+, 2+, IE 6+, Opera 8.0. 9.0, Konqueror. Update2: I received goods and bads for this posting. I thank you all. All comments will be available. If you have a tableless form that you wish to submit please contact me at manilodisan [at] gmail.com and I will upload them here (don't forget to leave a link inside or contact form).

For coding help and further support please use the forum.

This posting has no comments.