Jump to Main Content

Creating a form

Text Area

In most web forms, you want visitors to enter comments and/or suggestions into a text box. We can do this easily in a web form by using a text area. Add the following code:

<tr>
<td valign="top">Referred By: </td>
<td><textarea name="referredby" cols="25" rows="4"></textarea></td>
</tr>

The text area tag is one of the few form fields which requires an opening and closing tag, at least in the HTML 4.01 specification. In XHTML, the remaining form fields must have an opening and closing tag as well. Continuing, attributes/values of the text area tag are as follows:

Name:

  • Specifies the name of our text area, in our case, referredby

Cols:

  • Specifies the width of your text area, in our case, 25

Rows:

  • Specifies the height of your text area, in our case, 4

Save your file and preview the results.

Text area

Radio Button

Sometimes in web forms, you want to list multiple choices for your visitors and allow them to choose only one. If space on your web page isn’t an issue, we can easily provide our visitors this option with radio buttons. Add the following code:

<tr>
<td valign="top">Favorite  Search Engine:</td>
<td>
<input  type="radio" name="searchengine" value="google">
Google<br />
<input  type="radio" name="searchengine" value="msn">
MSN<br />
<input  type="radio" name="searchengine" value="altavista">
Alta Vista
</td>
</tr>

You might notice radio buttons are created using the input tag as text field. What makes a text field become a radio button is specifying the type as radio. The attribute/values of the input tag are:

Type:

  • Specifies the type of input, in this example, radio button

Name:

  • Specifies the name of our input field, in this example, searchengine

Value:

  • Specifies the value of each radio button, in this example, Google is first, followed by msn and Alta Vista

You might be wondering why all our radio buttons share the same name. The reason is simple – radio buttons are treated as a group. Thus they share the same name, in our case, search engine. The only difference is the value, which is the option the visitor chose. Save your file and preview the results.

Radio buttons

Check boxes

Sometimes in web forms, you want to list multiple choices for your visitors and allow them to choose multiple answers. If space on your web page isn’t an issue, we can easily provide our visitors this option with checkboxes. Add the following code:

<tr>
<td valign="top">Which  products do you use?</td>
<td><input type="checkbox" name="products" value="mx 2004">
Macromedia Studio MX 2004<br />
<input type="checkbox" name="products" value="ms office 2004">
MS Office 2003<br />
<input type="checkbox" name="products" value="vs 2004">
Visual Studio .NET<br />
<input type="checkbox" name="products" value="ad aware">
Ad-Aware</td>
</tr>

You might notice checkboxes are created using the same input tag as a text field. What makes a text field become a radio button is specifying the type as radio. The attribute/values of the input tag are:

Type:

  • Specifies the type of input, in this example, checkbox

Name:

  • Specifies the name of our input field, in this example, products

Value:

  • Specifies the value of each radio button, in this example, Macromedia is first, followed by Office, Visual Studio, and Ad-Aware

You might be wondering why all our check boxes share the same name. The reason is simple – check boxes are treated as a group. Thus they share the same name, in our case, products. The only difference is the value, which are the options the visitor chooses. Save your file and preview the results.

Check Boxes

We'll continue with this article by creating our submit and reset buttons next.

top of page