HTML/CSS

Form Design Using CSS and HTML

By Andrew R
01-Jun-08
Views: 101235

Every web application that collects information from the user should have an interface which the user can understand easily and interact with it. If the interface is easy for the user to understand, the information supplied by the user will be more accurate. This tutorial will guide you in designing HTML forms, which are easy to design and easy for the user to understand.

(Design 1) (Page 1 of 6)

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 --> 

    <table width="650px" border="0" cellpadding="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 -->              

                <table width="100%" border="0" cellpadding="3px" class="htmlForm" cellspacing="0">

                    <tr>

                        <td colspan="2">&nbsp;</td>

                    </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>

                            <select style="width: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>

                        <td colspan="2">&nbsp;</td>

                    </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">

            <td>&nbsp;</td>

            <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 (<td>) 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

(Desing 2) >>

Keyword:
Category:
	Advance Search >>