HTML Tutorials: Introduction To Forms
This tutorial introduces you to HTML forms and all the building blocks (elements) that are available to the web author when designing and creating 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 e-Mail 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. We do ask one thing of you. If you find this HTML
forms and form elements tutorial interesting or useful then other people are
certain to view it in the same light, always providing they can find it amongst
the 3 billion pages on the World Wide Web. You can help them and add interest
to your own content by providing some sort of reference and link back from
your own Web Site, Mailing List or Forum. Most people are interested in the
Internet and the link can point directly to this page or to the #Web-Wise-Wizard
Home Page. Just click here to display a popup that contains
a selection of HTML text and image link scripts that can assist you with this. example form tag script ... 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 E-Mail 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 e-Mail system. Not supported
in Microsoft browsers. Specifies which HTTP method will be used to pass
the form's contents to the CGI interface on the Web server. 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 Specifies how the form's contents should be encrypted. 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 could be considered the building blocks
of a form and I have even heard them described as toys in a toybox. Here we
list and demonstrate all elements that you could use when designing and creating
an HTML form. notes ... The forms input button is not specified in HTML but is a JavaScript extension.
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. checkbox selection example ...
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.
file upload example ...
file upload example script ... notes ... This usage of the forms input element is relativly 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 ... hidden example ... (hidden element is not displayed at all)
hidden example script ... image example ...
image example script ... notes (updated Aug, 2001) ... Many web authors appear to use to use this tag to provide a more sophisticated,
attractive, image 'submit' button, in preference to the standard HTML Form
Input, 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. Unfortunatly, few web authors appear to realise that the similarities between
the HTML Form Input, 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 dosen't have to be a button
image, it could be a map of the World or any other image that would normally
be used for a server-side image map. The essence of these similiarities 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.
password example ...
password example script ... radio selection example ... Select 1
2
3
radio selection example script ... reset example ...
reset example script ... submit example ...
submit example script ... text input line example ...
text input line example script ... notes ... A general purpose, single row, text input field. 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 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 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. Also See: What Is A Form?
The Form Tag
action
method
enctype
target
Form Elements
input type="checkbox"
Sliced Beef
Sauté Potatoes
French Fries
Green Vegatables
Carrots
Gravy
Side Salad
Cup of Tea
Glass of Milk
input type="file"
input type="hidden"
input type="image"
input type="password"
input type="radio"
input type="reset"
input type="submit"
input type="text"
select (example 1)
select (example 2)
textarea