Skip to content Skip to navigation
Summary: This module discusses how to add forms to your XHTML files. The tags discussed are <form>, <label>, <input>, <select>, <option>, and <textarea> tags.
The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome .
In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew . Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate .
This module builds on material discussed in some of the XHTML modules, e.g. the creation of an initial XHTML file . A complete listing of the links to all XHTML and CSS modules is also available.
Segments of the XHTML source code are shown in this module as image files, but links are given to the XHTML files and the source is readily available from a browser via the menu bar using File/Save As... , View/Source, or something comparable.
In this module we will discuss the construction of forms. Our approach will be to start with a single element (a text box)
and to add form elements (radio buttons, checkboxes, etc.) one at a time, while also discussing and demonstrating how the data in the form are transferred
to the server from the client (using a web browser) system. We will demonstrate both the
get
and
post
methods.
Let's say that we want to gather data on what folks think of this "Web Programming Quick Start Series." We now put together a form for this purpose. We do this one form element at a time, eventually covering all of the "basic" form elements.
formdemo1a.html is our first step. Figure 1 shows the XHTML code and Figure 2 shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
id
and
name
-- For our purposes, these will serve the same purpose,
to identify the form if we were to need to refer to it at some point later on.
method
-- This attribute usually takes either of two values:
get
and
post
. The method attribute specifies the means by which the data from the form are sent
to the server for processing. We will begin with the
get
method. After you
complete the email text box in this form, you can press <enter> and the data are sent to the server.
You can see the format of the data
being sent by observing the URL/Address line of your browser. We will discuss the
post
method later.
action
-- The value of this attribute is the address of the script to be executed when
the data are sent to the server to be processed. In this example, it is the complete URL to a server other
than the one on which these modules reside. If the script were on this server and in the same directory/folder
as the form, all that would be required would be the file name for the script.
label
tag. Browsers will render form elements without these tags.
For accessibility, these tags should be included with each form element. They are used by reader programs to
give the information related to what is required/requested in each form element. The
for
attribute
is used to
tie
the label with the form element by way of the
id
attribute of the
input
tag, shown in Line 14. This, of course, means that the
for
and
id
attributes
must
have the same value in order for this linkage
to work as intended.
input
tag (an "empty tag"). The
type
attribute specifies the
kind of form element to be presented by the browser. In this case it is a textbox via the value "
text
." The
name
attribute is the name of the data, whose value will also to be sent to the server for processing.
button. We will include
this next. For example, if we type "
smith@gmail.com
," the "name=value" pair sent to the server is
"
email=smith@gmail.com
."
formdemo1b.html
shows
our next step in this discussion, adding a
button.
Figure 3
shows
the XHTML code and
Figure 4
shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
input
tag that generates a
button. The
value
attribute allows you to put whatever text you would like on the button.
name=value
" pair being
"
submit=submit
".
formdemo1c.html is our next step in this discussion, adding radio buttons. Figure 5 shows the XHTML code and Figure 6 shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
input
tags
that generate the radio buttons. Notice the following:
type
specification ("radio"), since they are all radio buttons.
name
attributes also have the
same
value, namely
"rating." This is sensible since this relates to the same thing being measured.
We will see that name attributes have to be different for checkboxes.
value
attributes are different, of course. For example if
the person completing the form clicks on the button for "Poor" the data pair of "
name=value
" that is
transmitted from this form element are "rating=poor".
button, using
formdemo1c.html
before
choosing any kind of rating and then go back and choose one
of the rating radio buttons. The important point to take away from this minor
exercise is that if
no
radio button is chosen
no
data are transmitted for the radio button. This was
not
the case earlier with the textbox. Even if we leave it blank, the
name of the textbox with a "null" value is transmitted to the server.
formdemo1d.html shows our next step in this discussion, adding checkboxes. Figure 7 shows the relevant XHTML code, following the code for the radio buttons, discussed above, and Figure 8 shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
input
tags that generate the three
checkboxes. Notice the following:
type
specification ("checkbox") since they are all checkboxes.
name
attributes are all different, compared to all the same with
the radio buttons, discussed above. Since only one choice is expected from a set of radio
button the same name is reasonable, whereas any, all or none are the possibilities for checkboxes, hence we use different names for each checkbox.
value
attributes also have different values. Each value is given a
mnemonic value, although they can be whatever you like, e.g., numbers. In our example, if
the user selects "CSS" and "PHP," the data that are transmitted to the server are the following "
name=value
" pairs:
"
css=yes
" and "
php=yes
".
Nothing
is transmitted for "
xhtml
." Hence no data are transmitted for
unchecked
checkboxes.
button, using
formdemo1d.html
,
before
choosing
any
of the checkbox options. Next, resubmit with one or two
checkboxes chosen. Recall that with the radio buttons, only one "
name=value
" pair is transmitted
to the server
if
a radio button is chosen. With checkboxes
only
the
"
name=value
" pairs of checkboxes that are checked will be transmitted to the server.
formdemo1e.html is our next step step in this discussion, adding a Menu/List(Drop-Down> Figure 9 shows the relevant XHTML code and Figure 10 shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
input
tag.
Instead, and as you might expect, there are two tags used in tandem. The first is
the
select
tag, indicating that a menu/list element is being defined. By this time in the discussion, the attributes shown in line 47
are likely pretty straightforward:
id
attribute is used, as discussed earlier,
to tie with the
for
attribute of the
label
tag in line 46,
and is used to make the form conform to accessibility standards.
name
attribute specifies the name
of the data ("
name=value
" pair) that is sent to the server. In this case, it is
occupation
.
option
, used
to generate menu/list form element. Each of the
option
tags determines one of
the items in the menu/list. The
value
attribute of each is the second part of the "
name=value
" pair
of data sent to the server, e.g. selecting "Educator" from the list will cause "
occupation=teacher
" to
be transmitted to the server. The
selected
attribute is, as you might guess., the item
from the menu/list that shows (is selected) when the web page is presented in the browser.
button, using
formdemo1e.html
, to demonstrate how the "
name=value
" pair
is transmitted to the server.
formdemo1f.html is our final step in the creation of our example evaluation form for this "Web Programming Quick Start" series. Figure 11 shows the XHTML code and Figure 12 shows the view of the file from the Firefox web browser.
 |
 |
Please note the following concerning the XHTML code and related points:
for
and
id
attributes have the
same label/form element accessibility "linkages" as noted earlier, i.e., a text reader will
recognize that the label text corresponds to the textarea box.
name
attribute determines
the
name
of the "
name,=value
" data pair that is transmitted to the server. In this case
the value will be whatever is contained in the textarea box. The
cols
and
rows
determine the width in characters (cols) and the height (rows)
of the textarea box.
button, using
formdemo1f.html
, to demonstrate how the "
name=value
" pair
is transmitted to the server. As with the text box, discussed earlier, the
name
of the textarea form element is transmitted
to the server regardless of whether any data are placed in the textarea box or not.
Figure 13
shows that the "
name=value
" pairs of the data elements are transmitted
to the server via the the Address/URL line. Another way of viewing this is to see an example of
the information that is sent to the server by a browser when the browser is requesting some "service" (e.g. a file) from the server.
 |
Let's say that the our email address (the one we entered when we set up our browser) is
"jsmith@abcuniv.edu" and that our browser is requesting a file named, spiel.html. Furthermore,
let's say the path to the file we are requesting from the server is
/home/public_html/spiel.html
. When our browser
requests this file from the server using the get method, the data (header) sent to the server
would look something like what is shown in
Figure 14
.
 |
If we are asking the server to execute a program (e.g. execute a script on the server, using form data), using the get method, then the data
for the program are also provided on
the first line of the request for the script execution. Let's say that our script is named
forminputs_get.php
and
that it resides in path noted above,
/home/public_html/
. If our data were that contained in the responses
in
formdemo1f.html
, then our request of the server would be similar to that shown in
Figure 15
 |
?
" and then the pairs of "
name=value
"
are sent, separated by an "
&
." It is then the job of the script, residing on the server to parse the string of
data provided and process it appropriately. The script we have been using for all of these forms simply reads and echoes these
"
name=value
."
Whereas using the post method, the data, although not encrypted, are not visible in the browser. Figure 16 indicates how the data might be sent by the browser to the server, using the post method.
 |
If you wanted to provide a link that executed a script based some specific set of data (e.g. providing a link to dictionary.com that will return the definition of "pedantic"),
you would use the get
method. If you did not want the data stream to be visible in your browser, then you would use the post method.
As far as the XHTML is concerned, the only things to change are the values of
method
attribute and possibly the
action
attribute.
formdemo1f_post.html
uses the post method and
Figure 17
shows the
XHTML code and
Figure 18
shows the view of the file from the Firefox web browser.
 |
 |
As with our earlier examples using the get method, the script to be executed (
Listing
) simply "echoes" the "name=value" pairs of all the form element data sent tothe server.
To construct a form using Dreamweaver, you can begin the process (insert the form tag) using the
Forms category of the Insert Panel as shown in
Figure 19
or by way of Insert/Form>Form using the Menu bar, as shown in
Figure 20.
.
Either process generates a red dotted line rectangle in which you can then begin to place each
form element. The Properties Panel, shown in
Figure 21 demonstrates how the name, id, method, and action attributes for the form are set.
 |
 |
 |
 |
<label> tag for each form element.
 |
 |
More about this module: Metadata | Downloads | Version History
This work is licensed by Ronald Sawey under a Creative Commons Attribution License (CC-BY 2.0), and is an Open Educational Resource.
Last edited by Ronald Sawey on Jan 3, 2007 3:03 pm -0600.