HTML FORMS

Working with Form

Attributes

To specify where to send the form data and

how to send it add the following attributes
to the <form> tag:
<form action=URL method=option
enctype=text>
URL specifies the filename and location of the CGI
script that process the form
method attribute specifies how your Web browser
sends data to the CGI script
enctype attribute specifies the format of the data
stored in the forms field

The method
Attribute
There are two possible values for the method
attribute: get or post.
the get method (the default) packages the form data
by appending it to the end of the URL specified in the
action attribute
the post method sends form data in a separate data
stream, allowing the Web server to receive the data
through what is called standard input
the post method is considered the preferred way of
sending data to a Web server
The post method is also safer, because some Web
servers limit the amount of data sent via the get
method and will truncate the URL, cutting off valuable
information

The enctype Attribute

The exact meaning of the enctype
attribute is a technical issue.
The default enctype value is
application/x-www-formurlencoded.
Another enctype value that is often used
is multipart/form-data, which allows
the form to send files to the Web server
along with any form data.
The most basic way of encoding data is
to use text/plain, which encodes the
data as simple text.

Specifying Where and

How
to Send Form Data

This figure shows the CGI script that processes the form is located at the URL
http://www.langear.com/cgi/mailer (a fictional address) and uses the post method.

Form
Indicates the beginning and end of a form
There can be more than one form in an HTML
document
However, forms cannot be nested and it is
important that they should not overlap.

 Attributes
action=url
Specifies the URL of the application that will process
the form (required). The default is the current URL.
enctype=encoding
method=get|post
Specifies which HTTP method will be used to submit
the form data (required).
With get (the default), the information is appended
to and sent along with the URL itself.
The post method puts the form information in a
separate part of the body of the HTTP request.post is
the preferred method according to the W3C
specification.

target=name

<input type=button>
Attributes
name=string
Assigns a name to the form element to be passed to the
forms processing application.
value=string
Specifies the initial value for the parameter.

Working with Check

Boxes
A check box is either selected or not, there is only
one check box per field.
Check boxes are created using the following syntax:
<input type=checkbox name=name id=id
value=value>
name and id attribute identify the check box
the value attribute specifies the value that is sent to
the CGI script when the check box is selected

The <input> tag for a check box does not display

any text.
Check boxes are not selected by default.
to do this, add the checked attribute to the <input>
tag

10

Adding Check Boxes

11

Group Boxes for Radio

Buttons
and Check Boxes

12

<input type=checkbox>
Attributes
checked
When this attribute is added, the checkbox will be
checked by default.
name=text
Assigns a name to the checkbox to be passed to the
form-processing application if selected.
Giving the same name to several checkboxes creates
a group of checkbox elements, allowing users to select
several options with the same property.
value=text
Specifies the initial value of the control that is passed
on to the server. If not defined, a value of "on" is sent.

Creating File
Buttons
A file button is used to select files so
that their contents can be submitted for
processing to a CGI script.
The contents of the file are not
displayed--only the files location.
A programmer can then use that
information to retrieve a file and use it
for whatever purpose is required by the
script.

14

Using a File
Button
The figure
shows an
example of
using the file
button to
return the
location of a
file named
report.doc.

1. User clicks the Browse button

2. Selects a file from the

Choose File dialog box

3. The filename and location

are automatically placed in
the text box

15

<input type=file>
Allows users to submit external files with their form
submission. It is accompanied by a "browse button
when displayed in the browser.
Attributes
accept=MIME type
Specifies a comma-separated list of content types
that a server processing the form will handle
correctly. It can be used to filter out nonconforming
files when prompting a user to select files to send to
the server.
name=text
Assigns a name to the control.
value=text
Specifies the initial filename to be submitted.

Working with Hidden

Fields
A hidden field is added to the form but not
displayed in the Web page.
Because the field is hidden, it can be placed
anywhere between the opening and closing
<form> tags.
The syntax for creating a hidden field is:
<input type=hidden name=name value=value>

Place all hidden fields in one location to make it

easier to read and interpret the HTML code.
Include a comment describing the purpose of the
field.

17

Adding a Hidden Field

This figure shows
an example of the
hidden field code.

18

<input type=hidden>
Creates an element within a <form> that does not
display in the browser. Hidden controls can be
used to pass special form-processing information
along to the server that the user cannot see nor
alter.
Attributes
name=text
Specifies the name of the parameter that is
passed to the form-processing application for this
input element (required).
value=text
Specifies the value of the element that is passed
to the form-processing application.

Creating a Password
Field field is a text box in which
A password

the characters typed by the user are

displayed as bullets or asterisks i.e.
****.
The syntax for creating a Password field is:
<input type=password>

Using a password field should not be

confused with having a secure connection.
The password itself is not encrypted.
The password field only acts as a mask for
a field entry as it is entered.

20

<input type=password>
Creates a text-input element (like text) but the input
text is rendered in a way that hides the characters,
such as displaying a string of asterisks (*) or bullets
(o).
NOTE: this does not encrypt the information and
should not be considered as a real security measure.
Attributes
maxlength=number
Specifies the maximum number of characters the
user can input for this element.
name=text
Specifies the name of this parameter to be passed to
the form-processing application for this element
(required).

size=number
Specifies the size of the text-entry box (measured
in number of characters) to be displayed for this
element. Users can type entries that are longer
than the space provided, causing the field to
scroll to the right.

value=text
Specifies the value that will initially be displayed
in the text box.

Working with Radio

Buttons
Radio buttons display a list of choices from
which a user makes a selection.
Only one radio button can be selected at a time.
The syntax to create a radio button is:
<input type=radio name=name id=id
value=value>
name identifies the field containing the radio
button
id attribute identifies the specific option. Only
required if you intend to use a field label with the
radio button
value attribute indicates the value sent to the CGI
script, if that radio button is selected by the user

23

Creating Radio
Buttons

This figure shows an example of HTML code that creates radio buttons for party affiliations.

In this sample code, the value sent to the CGI script does not match the field label.
If the user selects the Republican radio button, the value gop
is sent to the CGI script paired with the field name party.

24

<input type=radio>
Creates a radio button that can be turned on and off. When a
group of radio buttons share the same control name, only one
button within the group can be "on" at one time and all the
others will be turned "off." This makes them different from
checkboxes, which allow multiple choices to be selected within
a group.
Attributes
checked
Causes the radio button to be in the "on" state when the form is
initially displayed.
name=text
Specifies the name of the parameter to be passed on to the
forms-processing application if this element is selected
(required).
value=text
Specifies the value of the parameter to be passed on to the
forms-processing application.

Creating a Group
Box

A group box labels an entire collection

of radio buttons.
A group box is a box placed around a set
of fields that indicates that they belong
to a common group.
The syntax for creating a group box is:
<fieldset>
<legend align=align>legend
text</legend>
collection of fields
</fieldset>
26

Creating a Group Box

Continued
the <legend> tag is used to display a
legend on the group box
legend text specifies the text for that
legend
the align attribute specifies where the
legend is placed in the box
align values are top (the default),
bottom, left, and right
browsers only support top and
right options at this time
27

Creating a Group Box

and Legend
This figure shows
an example of a
group box applied
to a set of radio
buttons.

start of
group box

group box
legend

resulting radio buttons and group box

28

Group Box Size

There is no attribute to control the size of a group
box.
The boxs height will be large enough to
accommodate the fields and labels in the field set.
The width is the width of whatever space remains
on the Web page.
To set the width to a specific value use a table cell
to place the group box and set the width of the
cell.
group boxes cannot extend across table cells; all of
the fields in the field set must be placed within a
single cell
29

Creating Form
Buttons
Buttons
can be clicked to:
run programs
submit forms
reset the form to its original state

30

Creating a Push Button

One type of button, called a push
button, is created using the <input> tag
as follows:
<input type=button value=text>
text is the text that appears on the button

By themselves, push buttons perform no

actions in the Web page.
To create an action, write a script or
program that runs automatically when the
button is clicked.

31

Creating Submit and

Reset Buttons
A submit button is a button that submits
the form to the CGI script for processing.
A reset button resets the form to its
original (default) values.
The syntax for creating these two buttons
is:
<input type=submit value=text>
<input type=reset value=text>
value attribute defines the text that appears on
the button

32

The name and value

Attributes
The name and value attributes can be used
for push, submit, and reset buttons.
Use these attributes when the form contains
multiple buttons and a program that
processes the form needs to distinguish one
button from another.
for example, a Web page advertising a shareware
program might include three buttons:
one used to download the program
another used to retrieve information
the third to cancel the form

33

Creating a Form Button

The figure shows HTML tags for buttons that download a program,
retrieves information, and resets the form to its original values.

34

Creating Buttons
with the <button> Tag
Buttons created with the <input> tag do not allow the
Web page designer to control the appearance of the
button.
For greater artistic control over the appearance of the
button, use the <button> tag.
The syntax of the <button> tag is:
<button name=name value=value type=option>
button text and HTML tags
</button>
name attribute specifies the name of the button
value attribute sends to a CGI script
type attribute specifies the button type (submit, reset,
or button)

35

Using the <button>

Tag
The figure shows how
to create a button that
contains formatted
text and an inline
image.
The default value for
the type attribute is
button. Within the
<button> tags you
can place whatever
HTML tags you wish
to format the buttons
appearance. This
includes inline
images.

the button type is a

simple push button

contents
of the
button

button image

36

<input type=reset>
Creates a reset button that clears the contents (or
sets them to their default values) of the elements
in a form.
Attributes
value=text
Specifies alternate text to appear in the button.

<input type=submit>
Creates a submit button that sends the
information in the form to the server for
processing.
Attributes
value=text
Specifies alternate text to appear in the button.

Text Boxes on the

Form
Text boxes are
blank and do
not contain any
accompanying
text, a text
description
needs to be
inserted, such as
Last Name,
adjacent to each
box so that the
user knows what
to enter.

text box

39

Controlling the Size of

a
Text
Box
By default, all text boxes are 20 characters wide.
The syntax for changing the size of a text box is:
<input size=value>
value is the size of the text box in characters

40

This figure
shows an
example of code
for setting the
width of text
boxes.

Setting the Width

of Text Boxes

41

Result of Setting the

Width of Text Boxes
text box width set
to 30 characters

42

Setting the Maximum

Length
Setting
the Input
width of a text box does not limit
for
Text
the number of characters the box can hold.

if a user enters text longer than the boxs

width, the text scrolls to the left
the user cannot see the entire text, but all of it
is sent to the CGI script for processing

The syntax for setting the maximum length

for field input is:
<input maxlength=value>
value is the maximum number of characters
that can be stored in the field

43

Setting a Default
Value for a Field
When the same value is entered into a
field, it may make sense to define a
default value for a field.
Default values can save time and
increase accuracy for users of a Web
site.
To define a default value, use the
following syntax:
<input value=value>
value is the default text or number that is
displayed in the field

44

Defining a Default Value

for a Field
If customers from countries other than the United States use this Web form,
they can remove the default value by selecting the text and pressing the Delete
key.

default value

45

<input type=text>
Creates a text input element. This is the default input
type and certainly the most useful and common.
Attributes
maxlength=number
Specifies the maximum number of characters the user
can input for this element.
name=text
Specifies the name of this parameter to be passed to the
form-processing application for this element (required).
size=number
Specifies the size of the text-entry box (measured in
number of characters) to be displayed for this element.
Users can type entries that are longer than the space
provided, causing the field to scroll to the right.
value=text
Specifies the value that will initially be displayed in the
text box.

Working with Form

Labels

HTML allows you to formally link a label

with an associated text element for
scripting purposes.
The syntax for creating a form label is:
<label for=id>label text</label>
id is the value of the id attribute for a
field on the form
label text is the text of the label
you must bind the label to the id attribute
of the field and not the name attribute

47

Creating a Label for

the fname Field
This figure shows
a label for the
fname field.

value of the id
attribute for the first
name field

48

Labels
Used to attach information to controls. Each label
element is associated with exactly one form
control.
Attributes
for=text
Explicitly associates the label with the control by
matching the value of the for attribute with the
value of the id attribute within the control
element.
Example:
<LABEL for="lastname">Last Name: </LABEL>
<INPUT type="text" id="lastname" size="32">

Creating a Text
Area

To create a larger text area for a text

box, use the tag:
<textarea name=name id=id
rows=value cols=value> default text
</textarea>
rows and cols attributes define the
dimensions of the text box
the rows attribute indicates the number of
lines in the text box

Default text can be specified in the

text box when the form is initially
displayed.

50

Creating a Text
Area
This figure shows
an example of a
text area with
default text.
The
<textarea>
tag is a two-sided
tag, which means
that it has an
opening tag
<textarea>,
and a closing tag,
</textarea>.

default text
area text

dimensions
of text area

resulting text area

51

Wrap Attribute
Values
The text entered in a text area wraps to the next line when it exceeds the width of the
box. To control how a browser wraps text to a new line use the wrap attribute.
This figure shows the three possible wrap options.

52

The wrap Attribute for

Text
Set the value of the wrap attribute to
either soft or hard to allow text to
wrap within the text box.
If no value for the wrap attribute is
specified, a value of soft is used.
For comment fields, use the <textarea>
tag with the wrap attribute set to soft
so that the users comments wrap to the
next line in the box.

53

Comment Text
Area

In this figure the

text box includes
a vertical scroll
bar, so that a
user can scroll
to see the hidden
text, if needed.

54

Textarea
Defines a multiline text-entry control.
The text that is enclosed within the <textarea> tags will be
displayed in the text-entry field when the form initially
displays.
Attributes
cols=number
Specifies the visible width of the text-entry field, measured in
number of characters (required).
Users may enter text lines that are longer than the provided
width, in which case the entry will scroll to the right (or wrap
if the browser provides some mechanism for doing so).
name=text
Specifies a name for the parameter to be passed to the formprocessing application (required).

rows=number
Specifies the height of the text-entry field in numbers of lines of
text (required). If the user enters more lines than are visible, the
text field scrolls down to accommodate the extra lines.

wrap=off|virtual|physical
Sets word wrapping within the text area.
Off: turns word wrapping off; users must enter their own line
returns.
Virtual: displays the wrap, but the line endings are not
transmitted to the server.
Physical: displays and transmits line endings to the server.
Soft: same as virtual.
Hard: same as physical.

Creating a Selection
List

A selection list is a list box from which a user

selects a particular value or set of values.
Selection lists are good to use when there is a
fixed set of possible responses.
Selection lists help prevent spelling mistakes
and erroneous entries.
A selection list is created using the <select>
tag.
The <option> tag is used to specify individual
selection items.

57

Using the <select>

and <option> Tags
The general syntax for the <select> and <option> tags is:
<select name=name id=id>
<option> item1
<option> item2
.
.
.
</select>

name and id attribute identify the selection field

each <option> tag represents an individual item in the
selection list
the text in the selection list is indicated by the text in
item1, item2, and so forth
The <option> tag is a one-sided tag.

58

Creating a
Selection List

selection list field name

items in the selection list

59

Using a Selection
List

60

Modifying the
Appearance
HTML provides several attributes to modify
of
Selection
List
the a
appearance
and behavior
of selection lists
and options.
By default, the <select> tag displays one
option from the selection list, along with a list
arrow to view additional selection options.
The number of options displayed can be
modified with the size attribute.
The syntax of the size attribute is:
<select size=value>
61

Modifying the
Appearance
value is the number of items that the selection list
in the form
of displays
a
Selection
List
by specifying a value greater than 1, the selection
list changes from a drop-down list box to a list box
Continued
if the size attribute is equal to the number of
options in the selection list, the scroll bar is either
not displayed or is dimmed

62

Selection Lists with

Different Size Values
This figure shows
selection lists with
different size
values.

size = "1"

size = "7"

size = "4"

size = "9"

63

Making Multiple
Selections
When using multiple selections, users are not
limited to a single selection from a selection
list.
Adding the multiple attribute to the
<select> tag allows multiple selections from
a list.
The syntax for this attribute is:
<select multiple>
A common method to make multiple
selections from a selection list is to hold down
a specific key while making selections.

64

Making Multiple
Selections Continued

The Windows operating system, multiple

selections can be made as follows:
for noncontiguous selections, press
and hold the Ctrl key while you make
your selections
for a contiguous selection, select the
first item, press and hold the Shift key,
and then select the last item in the range

Check and verify that the CGI scripts

used are designed to handle multiple
selection lists.

65

Working with Option

Values
By default, a form sends the values that

are displayed in the selection list to the

CGI script.
Instead of sending an entire text string, an
abbreviation or code can be sent to the
CGI script.
Specify the value that is sent to the CGI
script with the value attribute.
Use the selected attribute to specify
which item in the selection is selected, or
highlighted, when the form is displayed.

66

Working with Option

Groups
The most recent releases of HTML allows
you to organize selection lists into distinct
groups called option groups.
The syntax for creating an option group is:
<optgroup label=label>
label is the label assigned to the option group
the text for the label appears in the selection
list above each group of items but is not a
selectable item from the list
67

Option Groups

option group
label
a single
option
group

option
group label
a single option
group

68

Optgroup
Defines a logical group of <options>.
This could be used by browsers to display
hierarchical cascading menus.
<optgroups> cannot be nested.
Attributes
label=text
Specifies the label for the option group (required).

Option
Defines an option within a select element (a
multiple-choice menu or scrolling list).
Attributes
selected
Makes this item selected when the form is initially
displayed.
value=text
Returns a specified value to the forms-processing
application instead of the <option> contents.

Select
Defines a multiple-choice menu or a scrolling list. It is a
container for one or more <option> tags.
Attributes
multiple
This allows the user to select more than one <option> from
the list.
name=text
Defines the name for selected <option> values that, if
selected, are passed on to the forms processing application
(required).
size=number
Controls the display of the list of options. When size=1 (and
multiple is not specified), the list is displayed as a pull-down
menu. For values higher than 1, the options are displayed as
a scrolling list with the specified number of options visible.

Creating menus with

<select> tag
Pull-down menus
Scrolling Menu

Pull-down menus
The <Select> element displays as a pull-down
menu of options when no size specification is
listed(the default) or when size=1.
In Pull-down menu ,only one item may be
selected at a time .
(note: adding multiple attribute )