How to create 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.

For this section, create a new web page in your text editor. Save the file as forms.html. We'll add the different form elements as we go along.

 

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.

<FORM NAME = "frmTest">

</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 frmTest.

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 = "frmTest" METHOD = "post" Action ="mailto:me@me.com">

</FORM>

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 to 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". Form elements are separated by an ampersand ( & ). 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 scripting language like CGI, ASP .NET, PHP, etc. In which case you'd specify the address of the script in question:

ACTION = "ProcessSurvey.php"

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 = ""

This is good for testing purposes.

Form Elements

There are quite a few different form elements you can add to a form:

Text Boxes
Text Areas
Option Buttons
Check Boxes
Drop down List/Fixed Lists
Password Boxes
Command Buttons
Submit Buttons
Reset Buttons
Labels
Image Command Buttons
Hidden Form Values

HTML5, however, adds even more. There's even a very handy attribute called placeholder:

Placeholder
Email
Url
Number
Range
Date/Time
Search
Color

Some of these new form elements are only supported in certain browsers, however. For example, Color refers to a popup colour picker. Only the Opera web browser supports this, at the time of writing.