The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Introduction To HTML Forms

 
HTML Forms - Example order form

User Interaction ...

HTML forms introduce the concept of interaction between the web user and the World Wide Web, in particular the Web server or Host. This tutorial introduces you to HTML forms and the wealth of building blocks (elements) that are available to the web author when designing and creating a form.

What Is A Form?

A form is exactly what it says it is, a form that the user fills-in. It can have a variety of different types of input fields that you specify when you design the form (e.g. name, address, age, etc.) and the user fills-in prior to submitting the form. The only problem with HTML forms is that they are not much use by themselves because a traditional HTML form will only work in conjunction with a specially written server-side CGI program or script.

There are two exceptions to this rule and the first exception is the 'mailto' protocol (see below) which enables the form's contents to be mailed to an email address you specify. Using mailto is a really great way to practice developing HTML forms without having to get involved in CGI programming or scripting at the same time, but you will have to use a Netscape browser because Microsoft browsers don't fully support the mailto protocol. The other exception is forms where the contents are sent to a JavaScript function for processing. This subject is beyond the scope of this tutorial and will be dealt with more fully in the JavaScript section of Web-Wise-Wizard.

Many other uses for forms and form elements have developed since the introduction of JavaScript extensions to HTML forms and again these will be discussed more fully in the JavaScript section. In the meantime we explain the form tag and it's attributes and demonstrate each of the available form elements without the JavaScript extensions.

The Form Tag ...

example form tag script ...

 

action

This is where the Web browser sends the form's contents when the user submits the form. It can be a CGI program (script) that processes the data and this can be on any Web server. Alternatively, if you are using a Netscape Web browser it could be an email address.

cgi program  A program or script that runs as a process on a Web server and can access the users CGI variables. CGI programs and scripts can be written in a variety of languages which include 'Perl', 'C/C++', etc.

mailto:  An Internet protocol (similar to 'http:', 'ftp:', 'news:', etc) that provides a gateway to the Internet email system. Not supported in Microsoft browsers.

method

Specifies which HTTP method will be used to pass the form's contents to the CGI interface on the Web server.

notes ...

http  Hyper-Text Transfer Protocol: A pre-defined protocol to enable communication between a Web browser and a Web server on the World Wide Web.

cgi  Common Gateway Interface <www>: A standard for running external programs from a World-Wide Web HTTP server. CGI specifies how to pass arguments to the executing program as part of the HTTP request. It also defines a set of environment variables. Commonly, the program will generate some HTML which will be passed back to the browser but it can also request URL redirection.

enctype

Specifies how the form's contents should be encrypted.

target

Commonly, a CGI program or script will generate an HTML response which it will pass back to the Web browser. The target attribute specifies where that response should be sent. Possible options are the four HTML magic target names or a names window or frame.

Form Elements ...

Form elements could be considered the building blocks of a form and I have even heard them described as toys in a toy box. Here we list and demonstrate all elements that you could use when designing and creating an HTML form.

input type="button"

button example ...

button example script ...

 

this input tag does NOT have to be located within an HTML form ...

The INPUT BUTTON is not specified in HTML but is a JavaScript extension and can only be used to trigger a JavaScript script. We have included it here for the sake of completeness and it should not be confused with the DHTML 'button' tag which was first introduced in Microsoft v4 browsers.

input type="checkbox"

checkbox selection example ...

Sliced Beef
Sauté Potatoes
French Fries
Green Vegetables
Carrots
Gravy
Side Salad
Cup of Tea
Glass of Milk

checkbox selection example script ...

 

notes ...

Checkboxes enable the user to select or de-select multiple items in a list which means that they can select everything or nothing at all. It is worth noting that checkboxes can be checked or un-checked (the default) when the document is first loaded. Each checkbox must have a unique name.

The examples above are formatted using a table but we have not included the table or table elements in the example script. You can provide your own formatting or use your browsers 'right click/view source' facility to view the table formatting in our script.

input type="file"

file upload example ...

file upload example script ...

 

notes ...

This usage of the forms input element is relatively new and introduces the concept of the user uploading a file to a Web server. The example mini-script below is complete except that the form action attribute has no value. This value should contain the URL of a corresponding CGI program or script located on a Web server that handles the file upload.

file upload mini-script ...

 

input type="hidden"

hidden example ...

(hidden element is not displayed at all)

hidden example script ...

 

input type="image"

image example ...

image example script ...

 

notes (updated September, 2014) ...

Many web authors use this tag to provide a more sophisticated, attractive, image 'submit' button, in preference to the standard HTML Form, SUBMIT  button. Our image example button shows this usage and clicking on this button in a form would have exactly the same effect as clicking on a standard SUBMIT  button.

Also, few web authors appear to realise that the similarities between the HTML Form, IMAGE tag and server-side image maps are so great that their usage can freely interchanged. In reality they are both server-side Image Maps, for which you provide your own bitmap image. The image can be any design or size and it doesn't have to be a button image, it could be a map of the World or any other image that could be used for a server-side image map.

The essence of these similarities is that both tags display a bit image for the user to click. Both tags typically point to a CGI program on a web server, to which they pass the x,y coordinates of the position on the image, that the user clicks. You can learn more about coordinates in our image map coordinates tutorial. The Anchor Link, ISMAP  tag uses the HTTP GET  method to pass the coordinates whilst the Form Input IMAGE  tag coordinates can be passed using the HTTP GET  method or the HTTP POST  method, dependant on the method specified in the FORM  tag.

Confused by all these different terms?  We have prepared a demonstration CGI/Perl script and the three bitmap buttons below will each pass information to the script in their own way. Remember that each of these buttons is the user interface to a server-side image map and the object of this demonstration is to show you how the different demonstrations pass the x,y coordinates of the position on the button that you click, to the CGI script. The buttons are all 130 pixels wide by 60 pixels high and any x,y coordinates passed to the script should be within this range.

   
   

input type="password"

password example ...

password example script ...

 

input type="radio"

radio selection example ...

Select 1   2   3

radio selection example script ...

 

input type="reset"

reset example ...

reset example script ...

 

input type="submit"

submit example ...

submit example script ...

 

input type="text"

text input line example ...

text input line example script ...

 

notes ...

A general purpose, single row, text input field.

select (example 1)

select menu example 1 ...

select menu example 1 script ...

 

notes ...

Using the select element without a size attribute creates a drop-down menu similar to example displayed above.

select (example 2)

select menu example 2 ...

select menu example 2 script ...

 

notes ...

Using the select element with a size attribute creates a fixed scrolling menu similar to example displayed above.

textarea

textarea example ...

textarea example script ...

 

notes ...

The textarea element creates a text input box with a definable number of rows and columns. The user can use it to type a message or description and there is no limit to the length of the input. The wrap attribute values are as follows.

There are two other possible value names for the wrap attribute. The first is 'soft' which has the same behaviour as 'virtual' and the second is 'hard' which has the same behaviour as 'physical'. My advice is not to use these two value names at all.

To better demonstrate the use of the HTML forms textarea wrap attributes we have created a special demonstration page where you can input text into textarea boxes using each of the three different wrap attributes. This should enable you to select the best wrap attribute for your purposes.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Introduction To HTML Forms HTML forms provide interaction between a user's web browser and a web server. Here we introduce you to the wealth of building blocks (elements) that are available when designing and creating a form.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
True Reciprocal Linking
 
HTML Forms Resources
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England