Jump to Main Content

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.

Input Field

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.

Email input field

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.

Select list

We'll continue with the article by creating a text area next.

top of page