Creating a form
Create the table
Inside the opening and closing form tag, add the following code:
<form action="" method="post" name="simple">
<table width="500" cellpadding="0" cellspacing="0" align="center">
</table>
Inside the opening table tag, we have the following:
- Width
- Set to a fixed width of 500 pixels
- Cell padding
- Set to 0
- Cell spacing
- Set to 0
- Align
- Set to center
The last attribute/value will center our table in the browser. Save your file.
Input
In order to collect the name of our visitor, we need:
- One cell to ask the name of our visitor
- One cell for an input text field
Add the following code:
<table width="500" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Name:</td>
<td><input name="name" type="text" size="30"></td>
</tr>
</table>
We add one row with two columns. The first column asks our visitor for their name. The second column has an input text field for the visitor to input their name. The attributes/values of the input tag are discussed below:
Type:
- Specifies the type of input, in this example, text
Name:
- Specifies the name of our input field, in this example, name
Size:
- Specifies the width of our input field, in this example, 30
Maxlength:
- Optional. Specifies the number of characters which are allowed in text input field
Save your file and preview the results.
Since the email field uses the same input tag, we simply add the following code:
<tr> <td>E-mail</td> <td><input name="Email" type="text" size="30"></td> </tr>
Since we’ve covered this input tag, we’ll move forward. Save your file and preview the results.
Select
Many times when creating forms, there will be times when you are squeezed for space in your web page. This presents a problem when you need to offer the visitor multiple options to choose. In this scenario, a select tag is an obvious choice and simple to create. We add the following code:
<tr>
<td>Rate this site: </td>
<td><select name="ratesite">
<option value="null">---------------------</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="poor">Poor</option>
</select>
</td>
</tr>
You create a drop down (select list) by using the select tag. Inside the opening select tag we have the following attribute/value:
- name=ratesite
- Specifies the name of our drop down list
Inside the select tag, to provide our visitors with multiple options to choose, we use the option tag. Inside the option tag, we have the following attribute/value:
- value=null
- Specifies the value of each option tag
After the closing the opening option tag, we provide descriptive text for each option. The reason our first option is set to null and a series of dashes is to allow our visitor to select an option instead of making the first option, excellent, as a default option. Save your file and preview the results.
We'll continue with the article by creating a text area next.