How to Create a Form: An Example

We begin with the example and explanation to show you how to create a simple guest book for your Web site. You're free to add more to it, and this Guest Book assumes that you have an CGI script to process the form. We'll show you later how to write or obtain such scripts later. Our GuestBook will have the following fields:

NAME field: where visitor can enter his or her name.
EMAIL field: where visitor can enter his or her email address.
MESSAGE field: where visitor can leave a message for you. This text message would let you know how the visitor feels about your personal Web site.
We also have a SUBMIT button and CLEAR button at the end of the form. Whenever the visitor is finished his or her typing, he/she can click on the SUBMIT button to send you a notice, or he/she can click on the CLEAR button to erase typos and start over again.

Open your NotePad or WordPad and type in the HTML code for your GuestBook. After finishing it, save it with the name: guestbook.html, for example. We begin with this example by showing you the code first, and then we will explain what these lines of codes are really playing.

<HTML>
<HEAD>
<TITLE>My GuestBook</TITLE>
</HEAD>
<BODY>

<FORM METHOD="GET" ACTION="http://www.yourserver.com/yourname/cgi-bin/guestbook.cgi">
<P>
Your Name: <BR>
<INPUT TYPE="TEXT" NAME="name" SIZE=30 MAXLENGTH=40><BR>
</P>
<P>
Your Email: <BR>
<INPUT TYPE="TEXT" NAME="email" SIZE=30 MAXLENGTH=40><BR>
</P>
<P>
Your Message: <BR>
<TEXTAREA NAME="message" COLS=40 ROWS=5>
</TEXTAREA>
</P>
<P>
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
<INPUT TYPE="reset" NAME="clear" VALUE="Clear">
</P>
</FORM>

</BODY>
</HTML>
Explanation:
I believe the first five lines of codes do not cause you any troubles. As you remember, the <HTML> tag opens the HTML page. Later we close our page with the closing tag </HTML>. The new things here are the lines of codes that appear within the <FORM> and </FORM> tags.
1. The METHOD attribute and its value "GET" specify that we will use the GET method to obtain data from visitors. The ACTION attribute specifies the location or the path of the PERL script, which will process data from visitors. At the end of the path, you would probably notice the appearance of the "guestbook.cgi". This is the name of the PERL script stored in cgi-bin directory. In order for your GuestBook to work, you should have this guestbook.cgi working.

2. The next block of code begins with <P> tag and closes with </P> tag. This is the paragraph tags. The <INPUT> tag specifies the input field, where visitor can enter one line of text. In this example, the visitor is asked to enter his or her name in this input field. As you notice, there are several attributes that go within the <INPUT> tag. The TYPE attribute and its value "TEXT" specifies that we will expect anything that goes into this field is text. The NAME attribute specifies the name of this INPUT field. We also want our input field is 30 characters in length, and the maximum number of characters allowed in this field is 40.

3. The next block has similar HTML tags. So we won't explain it in detail. This block will specify the input field, where you would get visitor's email address.

4. The <TEXTAREA> tag specifies that we will have text area with 40 columns and 5 rows of text. This is enough for handling large text input.

5. Finally, you will notice the HTML tags for our GuestBook's Submit and Clear buttons.
After typing the code, view it in your browser, you would probably see this similar one: