Using Interactive Forms
HTML Forms allow you to interact with visitors to your site. You can get information from them, process it, and send information back based on what the visitor enters. Forms can be used for guest books, Web page-based email, order forms, information requests - and much more.
The data sent from most Forms is processed on a server by a CGI Script. Click here to learn some basics about scripts. If you don't plan to program your own Scripts, you can also acquire pre-written Scripts for nearly every Form processing task there is. Click here for a partial list of sites that offer pre-written Scripts.
For this tutorial, let's create a real life example that doesn't use a Script so you can see how to set up a Form and get an idea of where to go from there:
Creating Your First Form
We want to create a Form to allow visitors to leave their email address so they can receive a notification when our Web site is updated. The information they enter will be emailed to us from the Form. We'll also provide a place in the same Form where visitors can enter comments about our site.
These 'places' where users can enter data are called Form Elements. There are several Form Elements available in HTML. Examples of each are shown below:
When you use a Form Element on a Web page, you have to give each Element a 'Name'. Names are necessary so that CGI Scripts can identify each Form Element on your page. You can also assign Values to Elements. For example, if you enter "This is a test" as the Value of a Text Box, the words "This is a test" will appear there when a visitor views your Form.
For our Form we'll use two Text Boxes, one Scrolling Text Box, and one Push Button. The step-by-step instructions for creating the Form follow:
Step 1: Create a new Web page with a white background.
Step 2: Click the Insert Form Tool on the Forms Toolbar. The outline of the Form will appear on your page as shown below:
Step 3: Make sure the cursor is flashing inside of the Form outline, then select 'Form Properties' from the WebExpress 'Edit' menu.
The Form Properties dialog window will appear. In this dialog you'll enter information about how your form should be processed.
The 'Action:' field you see here should contain the action the browser is to take when your Form's Submit button is pressed. The 'Method' field tells the browser how the Form data is to be sent (usually using the POST method).
Normally in the 'Action:' field of this dialog you'd enter a URL to a CGI Script on your server, but for our purposes we'll use a simple mailto: tag.
Step 4: Now we'll create the input Elements where a visitor can enter the data we want. Remember, we'll have to give each Element a Name as we create it.
Still keeping the cursor inside of the Form outline:
Step 5: The next Element we'll create will be a Scrolling Text Box where people can freely type in comments. To create the Scrolling Text Box:
Step 6: Creating the Form's Submit button:
You should now have the following Form on your Web page:
Now save the page with the Form on it, then use the WebExpress 'View' menu to load and display the page in your browser. Enter information into the Form and press the 'Send It!' button. After a possible warning message from your browser (it may warn of the security hazard created by sending Forms in the clear via email), the Form contents will be emailed to you by your browser!
When the email arrives, you see that the data entered into the Form appears all on one line and encoded, and each bit of data has its name in front of it. A CGI Script could format the data in a more readable format.
Note: This should be enough to get you started, though it is by no means an exhaustive tutorial! Look up other resources and examples, the more you see the more the logic behind Forms will become clear.