Form design templates

Last update on: 07-16-2008
Get an idea of some types of forms with different ways that you can present your form to your visitor. these are just a simple example just to give you an idea, but you can add too many things that will make your form very nice by adding CSS for example.

Structuring Your Forms with tables :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>My Sample HTML Page</title> </head> <body> <h2>User Registration</h2> <p>Please complete the following form to register with our site:</p> <form action="#" method="post" name="register_form"> <table> <tr> <td>User Name:</td> <td><input type="text" name="txtUserName" size="20" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="pwdPassword" size="20" /></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <tr> <td>Gender:</td> <td><input type="radio" name="radSex" value="male" />Male</td> </tr> <tr> <td></td> <td><input type="radio" name="radSex" value="female" />Female</td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>How did you hear about us?:</td> <td> <select name="selReferrer"> <option selected="selected" value="">Select answer</option> <option value="website">Another website</option> <option value="printAd">Magazine ad</option> <option value="friend">From a friend</option> <option value="other">Other</option> </select> </td> </tr> <tr><td> </td><td> </td></tr> <tr> <td>Please select this box if you wish<br /> to be added to our mailing list <br /><small>We will not pass on your details to any third party.</small></td> <td><input type="checkbox" name="chkMailingList" /></td> </tr> <tr> <td></td> <td><input type="submit" value="Register now" /></td> </tr> </table> </form> </body> </html>

Structuring Your Forms with <fieldset> and <legend> Elements :

Large forms can be confusing for users, so it�s good practice to group together related form controls. The <fieldset> and <legend> elements do exactly this�help you group controls.

The <fieldset> element creates a border around the group of form controls to show that they are related.
The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.

In the following example, you can see how a form has been divided into four sections:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>My Sample HTML Page</title> </head> <body> <form action="#" method="post" name="frmComp"> <fieldset> <legend><em>Contact Information</em></legend> <label>First name: <input type="text" name="txtFName" size="20" /></label><br /> <label>Last name: <input type="text" name="txtLName" size="20" /></label><br /> <label>E-mail: <input type="text" name="txtEmail" size="20" /></label><br /> </fieldset> <fieldset> <legend><em>Competition Question</em></legend> How tall is the Eiffel Tower in Paris, France? <br /> <label><input type="radio" name="radAnswer" value="584" />584 ft</label><br /> <label><input type="radio" name="radAnswer" value="784" />784 ft</label><br /> <label><input type="radio" name="radAnswer" value="984" />984 ft</label><br /> <label><input type="radio" name="radAnswer" value="1184" />1184 ft</label><br /> </fieldset> <fieldset> <legend><em>Enter competition</em></legend> <input type="submit" value="Enter Competition" /> </fieldset> </form> </body> </html>

Note that if you use a table to format your form, the <table> element must appear inside the <fieldset> element. If a <fieldset> resides within a table that is used to format the page, then the entire fieldset must reside within the same cell.

Designing Forms's lessons:

Understanding Forms
Form Controls
Form Design Templates