Introduction to HTML Forms

 

HTML forms are a way of gathering data from visitors to your page. Forms typically have text boxes for data input, radio buttons, drop down boxes, and buttons so that users can Submit the form. A reset button is also handy, just in case mistakes are made filling out the form. The best way to understand what a form does is to see one in action. Click the link below to see the form we'll be creating. Fill out the form and click the Submit button (you won't be sending it anywhere). Test the Reset button, too.

A Form in action

You will shortly be using your HTML Editor to create the form1.html web page. But let's start with a few explanations.

 

The Form Tag

You don't have to tell your browser about any form elements on your web page. If you just want a simple form element like a text box, you can insert the text box tag by itself. But if you want to do something with the information on your form, like send it somewhere or to someone, you have to "tell" your browser about the form elements on your page. You do this with the Form tag:

<FORM>

</FORM>

Like most HTML tags, the FORM tag comes as a pair, the forward slash preceding the second FORM tag to indicate that the form tag ends. Any form elements you need then go between these two FORM tags.

A NAME attribute is a useful addition to the FORM tag. When the form has a name, you can then refer to it in scripts. You'll see how to process a form with scripting in a later section. For now, just be aware of how to use the name:

<FORM NAME = "frmSurvey">

</FORM>

To give your form a name, type a space after FORM then type the word NAME, followed by an equals sign. Finally, add a name for your form. You can call it anything you like. Here, we've called the form "frmSurvey".

If you want your form to go somewhere or to someone, two other attributes are needed in the FORM tag: METHOD and ACTION. Like this:

<FORM NAME = "frmSurvey" METHOD = "post" Action = mailto:me@me.com>

METHOD is way to send the data. There are two options, Post and Get. Post sends the data in single lines of text; Get squashes all the data in a single line and adds it the URL in the Action part. If the URL was an internet address, you'd see all the data you're sending in the address bar of your browser. This sort of thing:

ProcessSurvey.html?text1=John&text2=Smith

The first name John was typed into the text box called "text1" and the surname Smith went into the text box called "text2". That is a direct result of using the Get method to send data. The Post method doesn't add all that code to the address bar of your browser.

You should use Post to send your data, rather than Get.

ACTION is used to specify the address where you want to send the data. Here, we're using an Email link to send the data straight to an email address:

ACTION = mailto:me@me.com

But the form can be processed by a CGI script or an ASP script. In which case you'd specify the address of the script in question:

ACTION = "ProcessSurvey.asp"

To ensure that data in your forms is not sent anywhere, you can just add a pair of double quotes to the ACTION attribute:

ACTION = ""

 

In the next part, we'll take a look at how to add a textbox and a textarea to a HTML form.

 

Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Course