Just another WordPress.com site

Before read this, if You want more information about all of this please visit : agiptek.com

First form we are going to design is split into two columns(panels), first column contains form fields and the other column provides space for instruction or rules on filling the form. The design is very easy to implement with minimum css styles and html tags. The form looks like the one below 


Here is all the markup to design the above form

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Split Form Design</title>
<style>
.htmlForm td{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#CC3300;
border-bottom:1px #EAE3C8 solid;
}
.htmlForm input,select{
border:1px #BDB597 solid;
font-family:tahoma;
font-size:12px;
padding:2px;
}
.points{
font-family:tahoma;
font-size:11px;
color:#CC3300;
padding-left:20px;
padding-top:20px;
}
.points li{
padding-top:5px;
}
.formHeading{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#CC3300;
padding:10px;
}
</style>
</head>
<body>
<!– The outter table to contain the form and the instruction panel –>
2px” cellspacing=”1px” bgcolor=”#FFCC66″>
<tr bgcolor=”#FFFFDD”>
<td width=”2px” bgcolor=”#FFCC66″></td>
<td width=”400px”>
<div class=”formHeading”>Registration Form</div>
<!– The inner table below is a container for form –>
htmlForm” cellspacing=”0″>
<tr>
&nbsp;
</tr>
<tr>
<td align=”left”>First Name</td>
<td width=”220px”><input type=”text” size=”32″ /></td>
</tr>
<tr>
<td align=”left”>Last Name</td>
<td><input type=”text” size=”32″ /></td>
</tr>
<tr>
<td align=”left”>Email</td>
<td><input type=”text” size=”32″ /></td>
</tr>
<tr>
<td align=”left”>Password</td>
<td><input type=”text” size=”32″ /></td>
</tr>
<tr>
<td align=”left”>City</td>
<td><input type=”text” size=”32″ /></td>
</tr>
<tr>
<td align=”left”>Country</td>
<td>
150px”>
<option> – Select Country -</option>
</select>
</td>
</tr>
<tr>
<td align=”left”>Zip</td>
<td><input type=”text” style=”width:150px”/></td>
</tr>
<tr>
<td align=”left”>Gender</td>
<td>
<input type=”radio” name=”gender” />Male
<input type=”radio” name=”gender” />Female
</td>
</tr>
<tr>
&nbsp;
</tr>

</table>
</td>
<td valign=”top”>
<ul class=”points”>
<li>First Name and Last Name are optional</li>
<li>Your email will be used as your login id</li>
<li>Password must be at least 5 characters long</li>
<li>Zip code must be a 5 digit numbber</li>
</ul>
</td>
</tr>
<tr bgcolor=”#FFCC66″>
&nbsp;
<td colspan=”2″>
<input type=”button” value=”Save” />
<input type=”button” value=”Cancel” />
</td>
</tr>

</table>
</body>
</html>

Understanding the markup

We have applied “.htmlForm” class to the inner table containing the form fields. Now look at the following css rules

.htmlForm td{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#CC3300;
border-bottom:1px #EAE3C8 solid;
}

The above CSS rules are only applied to the cells () which are in the inner table because we have only applied “.htmlForm” class to the inner table. These rules only change the font style, font size, text color and add a faded line below every cell in the inner table.

.htmlForm input,select{
border:1px #BDB597 solid;
font-family:tahoma;
font-size:12px;
padding:2px;
}

These rules apply style on input and selection controls in the form, changing the font, border and padding. The other three classes are regular css rules



Iklan

Comments on: "Form Design Using CSS and HTML" (2)

  1. Hi, this is a comment.
    To delete a comment, just log in, and view the posts’ comments, there you will have the option to edit or delete them.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: