Create forms


  1. Begin a form

Create a new page in the Travel West site with the file name infoform.html.
Title the page Request for Information.
Below the tag, insert a paragraph:
Fill out the following form to get
more information about
traveling West:
Below the paragraph, insert a
tag:

Fill out the following form to get more
information about traveling West:

Add a closing tag::
Copy and past the code for the first row to create two more rows:

Name:
Name:
Name:

In the two new rows, replace the word Name with Address and Email:

Name:
Address:
Email:

Save infoform.html, then view it in the browser.

It should look like this:



In Notepad, open index.html.

Add a new paragraph linked to infoform.html:

Save index.html and view it in the browser.

Click the linked sentence.

It should bring up the page with the form, infoform.html.

Make the form work
In infoform.html, add a method to the
tag:
method="post">

TIP: There are two methods used in forms, post and get.

post is used to send information to the server,

get to get information from it.

Add an action:

action="http://www.yourdomain.com/cgi-bin/formmail.pl">


Save infoform.html.

Making a form work

To make a form work, an action must be assigned to it.

Consult with your Web server administrator to specify what action you should assign.

The action above tells the form to post its data to

a program called formmail.pl atyourdomain.com.

In this case, the formmail.pl program

takes the form data visitors submit and emails it to you.

Create a new form

Create a new page in the Travel West

site with the file name favoritesform.html.

Title it My Favorite Places.

Insert tags.

Between them, insert a table with four rows, and two cells in each row.

Fill the cells with the text and form objects seen below:

TIP: The HTML code for a drop-down list looks like this:


The HTML code for radio buttons looks like this:

Radio button 1


 Radio button 2

Put these values in the drop-down list:

California
The Rockies
The Midwest

Save the page and preview it in the browser.

It should look like this:



Web Layout HTML & CSS