Creating a form
As a web developer you will be asked many times throughout your career to create a web form. These forms can gather various types of visitor information and implement functionality such as:
- Membership registration
- Update contact information
- Purchase merchandise
- Provide a simple feedback form
The list can continue quite extensively. Creating a web form which provides various ways to gather visitor information is easy to do in most cases. In this tutorial, we’ll examine the following:
- Form tag
- Input
- Drop down list
- Text area
- Radio button
- Checkboxes
- Submit & reset button
If you would like to follow creating a form step-by-step development or try your hand at creating a web form, you will find the project files link helpful.
Form tag
In your text editor create a new file named forms.html and add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="" method="post" name="simple" >
</form>
</body>
</html>
Forms
When creating forms you use a form tag which serves as a container for other form fields used to gather visitor information. Forms are similar to tables or DIVS because they have an opening and closing tag:
- <form>
- Opening tag
- </form
- Closing tag
The individual attributes inside the opening form tag are discussed below:
Action: This attribute allows you to set another file used in processing visitor information. Developers usually use the following:
- CGI
- ASP or ASP.NET
- aspx
- Coldfusion
When a visitor presses the submit button, it causes the action attribute to execute and call the server-side file. This file contains code to do the following:
- Process the results into a readable format
- Perform any server-side validation needed
- Send an email to a specified recipient(s)
Method: This attribute deals with how information with your form is used. Possible values are:
- Get
- Post
Nine times out of ten, you’ll use post, which hides information from the visitor, and passes the information internally. Get, will past visitor information through the address bar and will be readily seen by all who use the application. If you’re passing sensitive information such as banking or social security numbers, you should always use the post method.
Name: This attribute is the name of your form.
ID: This attribute gives your form a unique name, which is then used in styling a web form with CSS.
Creating the form
Inside the opening and closing form tag, we need a way to lay out a form. We have two options:
- CSS
- Table
There are strong debates on which is more appropriate. While neither method is right or wrong, most of the time forms are designed in a tabular format, which means they are a perfect candidate to be placed inside a form. General rules of thumb, if the form represents tabular data, use a table, if not, then use CSS. If you decide to use CSS, make sure you exhaustively test your form in all modern browsers to account for any browsers inconsistencies. For this tutorial’s purpose, we’ll use a table.
We'll continue with this article by creating a table next.