HTML/CSS

Form Design Using CSS and HTML

By Andrew R
01-Jun-08
Views: 101991

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.

(Desing 3) (Page 3 of 6)

The third form is a bit different from the regular form designs, highlights the form lables with different background color. Instructions or rules can be added at the top or bottom of every field as you see in the phone no field in the form image 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>Design 3</title>

</head>

<style>

.outter{

    border:3px #E0F0E8 solid;

    background-color:#F5FAF9;

}

.note{

    font-family:tahoma;

    font-size:12px;

    color:#333333;

    border:1px #55917A dashed;

}

.input{

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-weight:normal;

    font-size:12px;

    border:1px #A7BEB7 solid;

}

.text{

    font-family:tahoma;

    font-size:11px;

    color:#617E78;

}

.formHeading{

    font-family:Arial, Helvetica, sans-serif;

    font-size:18px;

    color:#55917A;

}

</style>

<body>

<table width="550px" class="outter">

    <tr>

        <td>

            <table class="text" border="0" cellpadding="4" cellspacing="3" width="100%">

                <tr height="40px">

                    <td colspan="2" class="formHeading">Register - Create Account</td>

                </tr>

                <tr>

                    <td colspan="2" class="note" bgcolor="#E0F0E8">Field marked with <span style="color:#FF0000">*</span> are compulsory fields

                    </td>

                </tr>

                <tr height="10px">

                    <td colspan="2"></td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8" width="32%"><span style="color:#FF0000">*</span>Your Name</td>

                    <td width="68%"><input size="35" maxlength="50" class="input" type="text"></td>

                </tr>

                <tr>

                   <td align="right" bgcolor="#E0F0E8"><span style="color:#FF0000">*</span>E-Mail ID</td>

                   <td><input size="50" maxlength="50" class="input" type="text"></td>

                </tr>

                <tr>

                   <td align="right" bgcolor="#E0F0E8">Alternate E-Mail ID</td>

                   <td><input size="50" maxlength="50" class="input" type="text"></td>

                </tr>         

                <tr>

                   <td align="right" bgcolor="#E0F0E8">Your Phone</td>

                   <td>

                        <span>

                            <small>Country Code&nbsp;-&nbsp;City Code&nbsp;&nbsp;-&nbsp;&nbsp;Phone Number</small>

                        </span><br>

                            <input size="6" class="input" type="text">&nbsp;-&nbsp;

                            <input size="4" class="input" type="text">&nbsp;-&nbsp;

                            <input size="23" class="input" type="text">

                    </td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8">Mobile Phone </td>

                    <td><input size="35" class="input" type="text"></td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8"><span style="color:#FF0000">*</span>Your Postal Address</td>

                    <td><textarea cols="37" rows="3" class="input"></textarea></td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8"><span style="color:#FF0000">*</span>Country </td>

                    <td>

                    <select class="input">

                     <option value="x" selected="selected">

                        ------------- Select One --------------

                    </option>

                    </select>

                     </td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8"><span style="color:#FF0000">*</span>Password</td>

                    <td><input size="25" class="input" type="password"></td>

                </tr>

                <tr>

                    <td align="right" bgcolor="#E0F0E8"><span style="color:#FF0000">*</span>Re - Enter Password</td>

                    <td><input size="25" class="input" type="password"></td>

                </tr>

                <tr>

                    <td></td>

                    <td><input value="1" type="checkbox">&nbsp;&nbsp;<b>I accept the <a href="#">Terms of Use</a></b></td>

                </tr>

                <tr>

                    <td></td>

                    <td height="30">

                        <input value="Continue &gt;&gt;" class="btnbg" type="submit">&nbsp;&nbsp;

                        <input value="Reset" class="btnbg" type="reset">&nbsp;&nbsp;&nbsp;

                   </td>

                </tr>

            </table>

        </td>

    </tr>

</table>

</body>

</html>

Understanding the markup

The form is designed with the help of two tables. The outter table creates border and padding and inner table is a container for the form. Everything else is very similar to previous two forms.

(Desing 4) >>

Keyword:
Category:
	Advance Search >>