F

• The biggest tool to allow

your readers to • Creating a form usually
communicate with you via involves two independent

O the Web.

• The most popular way to

steps:
• create the layout for the
form itself

R make web pages

interactive.
• and then write a script
program on the server
side (called a script or

M • Like forms on paper, a

FORM on a web page
allows the user to enter
program) to process the
information you get back
from a form.

S requested information and

submit it for processing.
 <FORM> TAG
• The opening tag of the FORM element usually includes two attributes:
METHOD and ACTION.
• In its simplest use, <FORM ...> can be used without any attributes:
• <FORM>..</FORM> tags are used to create a form.
• Inside these tags are each of the individual form elements plus any
other HTML content to create a layout for that form (paragraphs,
headings, tables, and so on).
 <FORM> ATTRIBUTES
• NAME attribute is used to name form according to their use.

• METHOD attribute identifies how the information will be processed:

• POST method - the browser sends the data in two steps:
• the browser contacts the form- processing server specified in the ACTION attribute,
• when contact is made, it sends the data to the server in a separate transmission.

• GET method - contacts the form-processing server and sends the form
data in a single transmission step:
• the browser appends the data to the form's action URL, separated by
the question mark (?) character.
 <FORM> ATTRIBUTES
• RULES OF THUMB IN USING THE GET AND POST METHOD:
Use GET method when: Use POST method when:
• sending small forms with a few • sending forms that have many
short fields fields, or ones that have long
• inexperienced in writing server- text fields
side form-processing • security is an issue
applications
• a web page is a target for
bookmarking
 <FORM> ATTRIBUTES
• ACTION attribute is a pointer to the script that processes the form on the server side.
• The ACTION can be indicated by a relative path or by a full URL to a script on your server
or somewhere else.
• Most webmasters keep their forms-processing applications in a special directory on their
Web server, usually named cgi-bin
• Keeping these special forms-processing programs and applications in one directory
makes it easier to manage and secure the server.

A typical <FORM> tag

with the ACTION attribute
looks like this:
EXERCISE
• IN A PIECE OF PAPER, EXPLAIN IF WHAT THE BLOCK CODES
PERFORMS.
1. <FORM METHOD=POST
ACTION="http://www.myserver.com/cgi-bin/form-name">
...
</FORM>
2. <FORM METHOD=GET
ACTION="http://www.myserver.com/cgi-bin/form-name">.
..
</FORM>
 OTHER FORM ATTRIBUTES
ENCTYPE
• “application/x-www-form- urlencoded”
• “multipart/form-data”
• determines the mechanism used to encode the form contents.
• you can leave this attribute as default (unspecified) unless you are creating a file
upload field.

NAME
• useful when you want to use scripting like VB or JAVA scripts.

TARGET
• the target frame where the response page will show up.
 INPUT ELEMENT
<INPUT> tag creates the data entry fields on an HTML form.

Use this tag to define one common form elements, including text fields, multiple-choice lists,
clickable images, and submission buttons.

Although there are many attributes for this tag, only the TYPE and NAME attributes are
required for each element.

INPUT element has ten different

types of fields: Text boxes, Password
boxes, Checkboxes,
Option (Radio) buttons, Submit,
Reset, File, Hidden and Image.
 INPUT ELEMENT ATTRIBUTES
TYPE ATTRIBUTE identifies the type of INPUT to use - text, password, checkbox, radio,
submit, reset, file, hidden, image, and button.
NAME attribute sets the name for the element.
VALUE sets the value for an input field.
• sets the default values for text and password fields
• sets the button text in submit
• reset and plain buttons
• sets the values of the choices in radio buttons
• sets the permanent values of hidden fields
• has no effect on file, and image fields
 INPUT ELEMENT ATTRIBUTES
SIZE attribute sets how wide a text field should be. SRC attribute specifies the URL
of an image in IMAGE TYPE of
INPUT.

MAXLENGTH the maximum number of characters for

text or password fields

CHECKED attribute specifies that the control or TYPE is

initially checked; only applies to CHECKBOX and
RADIO type of INPUT.
 INPUT TYPE ELEMENT
<INPUT TYPE=(TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE,
HIDDEN, IMAGE)>
TEXT Input Field - use to define text input field
in a form of textbox.
• Required attributes are NAME, VALUE, SIZE, MAXLENGTH.
• Other attributes are ALT, TABINDEX, ACCESSKEY.

TEXTAREA Input Field - use to insert

multiple-line fields in a form
• Uses <TEXTAREA>...</TEXTAREA>
tags
• Attributes are NAME, ROWS, COLS
• WRAP attribute behaviors are OFF,
SOFT, HARD
 INPUT TYPE ELEMENT
PASSWORD Type – characters entered in this field are in a masked text.
• Echoing is the term used by the programmers by not displaying the text
• entered into the text fields, shows up as asterisk or dots.
• Attributes required are NAME, SIZE, MAXLENGTH

RADIO Type – is similar to a list but you need to select an item in that group.
• Attributes required are NAME, VALUE, CHECKED
 INPUT TYPE ELEMENT
CHECKBOX Type – items are grouped in a set of choices that can easily be selected and
deselected.
• Attributes required are NAME, VALUE, CHECKED
 INPUT TYPE ELEMENT

SELECTION Type – gives compact

alternatives:
MULTIPLE Attribute – to allow more than
pulldown menus and scrolling lists in
one option selection at a time
<SELECT>...</SELECT> tags
• Uses <OPTION> tag to identify an item
 INPUT TYPE ELEMENT

SUBMIT Type – submits the information to the

identified server
• Required attributes are NAME, VALUE

RESET Type – allows the user to reset--

erase or set to some default value--all
elements in the form
 INPUT TYPE ELEMENT
FILE Type - creates a field where it allows the
user to upload files from their local computer or
network

IMAGE Type - forms behave just like image maps; when you click somewhere on the image,
the form is submitted back to the server

HIDDEN Type - a way to embed information into your forms that cannot be ignored or altered
by the browser or user
• Attributes required are NAME, VALUE