CHAPTER 2 : HTML FORMS Masurah Mohamad

CSC584
& HEADERS Enterprise
Programming
header

form
 •Example:
<H1> Heading One </H1>

HEADER <H2> Heading Two </H2>

<H3> Heading Three </H3>
<H4> Heading Four </H4>

Heading Tags: H1,H2,H3,H4,H5 <H5> Heading Five </H5>

and H6 <H6> Heading Six </H6>

• Start and End tag are required

• <H1-H6> tag briefly describes
the topic of the section that it
introduces
• Render more important
headings in larger fonts
• There are 6 levels of heading
in HTML
FORMS
Form is a section of a document containing special
elements:
• controls (checkboxes, radio buttons, menus) and
• labels on those controls.
Users generally fill-in a form by modifying its
controls (entering text, selecting menu item,) before
submitting the form to an agent for processing.
ELEMENTS TO BE USED

Form tags are container elements (has

begin and ending tag)

Between the <FORM> and </FORM>

tags, you can place the various tags for
each of the fields in the form.
FORM TAG AND ITS BASIC PROPERTIES
Property Description
Name Name of the form
Method Define the way data will be transferred.
Value accepted are GET and POST

Action The address or page of which data will be

sent and processed
target Sets or returns the value of the target
attribute in a form
(_blank,_self,_parent,_top,framename)
EXAMPLE
<Form Name=“Example” Method=“POST”
Action=“myStore.php” target=frame1>

Above example Data will be

create a form sent using POST
section with the method to
name Example. myStore.php
METHODS

POST – send GET – attach

data through the data
‘document’ given by the
which is user to the
hidden from destination
the user URL
FORM - ELEMENTS

To acquire data from users, many

elements can be used

Some of the commonly used elements in

Web page forms are:
• input boxes for text and numerical entries
• radio buttons/option buttons to select single
option from a predefined list
MORE SAMPLE ELEMENTS
 MORE SAMPLE ELEMENTS…
text areas for
selection list extended
for long list of entries that
options usually might include
a drop down several lines of
list box text

check boxes to submit and

specify an item reset buttons
as either being to either submit
present or the form to
absent CGI script or
reset the form
to its original
state
 ELEMENTS
Elements Tag
Textbox, Hidden, <INPUT>
Radio Button,
Check Box
Text Area <TEXTAREA>…</TEXTAREA>

List down box <SELECT>…</SELECT>

INPUT TAG, TEXTBOX, RADIO BUTTON AND
CHECK BOX

<INPUT> tag offers at least 4 ways

of data acquisition namely:
• Textbox,
• Hidden,
• radio button;
• check box
<INPUT> TAG AND ITS PROPERTIES
Property Description
Type Define the type of input. Acceptable values
include text, hidden, radio, reset or submit
Name Name of the input
Value Default value if the user did not enter any
Checked For checkboxes and radio button. To
indicate whether item is checked
Disabled The item cannot be changed. Not submitted
with other data
Readonly The item cannot be changed. Submitted
with other data
 INPUT BOXES
It is a single line box into which user can enter text or
numbers.
Example: <INPUT TYPE=option NAME=text> 1

To specify the length, maxlength, value:

<INPUT TYPE=TEXT NAME=Last Name SIZE=25> 2

3 <INPUT TYPE=TEXT NAME=ICno SIZE=8 MAXLENGTH=14>

<INPUT TYPE=TEXT NAME=state VALUE=WP> 4

1 2 3 4
LIST DOWN BOX
<SELECT> will be accompanied by <OPTION> tag.
The tag will display the options available for the user.
<OPTION> properties will be as follows:

Property Description
Selected Will be selected by default
Value Value of the option
LIST DOWN BOX / SELECTION LIST
Example :
<SELECT NAME=Product>
<OPTION>Apples
<OPTION>Oranges
<OPTION>Mangoes
</SELECT>
Product is the name you assigned into the selection field
and apples, oranges are possible values displayed in the
selection list.
MODIFYING THE APPEARANCE OF A
SELECTION LIST
You can use these tags for modification:
<SELECT SIZE=value> - value is the number of
items that the selection list will display

<SELECT NAME=Product SIZE=2>

<OPTION VALUE=1>Apples
<OPTION VALUE=2>Oranges
<OPTION VALUE=3>Mangoes
</SELECT>
DEFAULT VALUE IN THE SELECTION
LIST
<SELECT NAME=Product>
<OPTION VALUE=1>Apples
<OPTION SELECTED>Oranges
<OPTION VALUE=3>Mangoes
</SELECT>
 Checkbox is used when we need
user to select more than one
CHECKBOXES option e.g: Job Assignment

On/off switches that may be toggled by the user.

A switch is “on” when the control element’s checked

attribute is set.

When a form is submitted, only “on” checkbox controls

can become successful
CHECKBOXES
Sample tag:
<INPUT TYPE=CHECKBOX NAME=DEMOCRAT>DEMOCRAT1
democrat1–is the name
of the field

Variations of the checkboxes:

<INPUT TYPE=CHECKBOX NAME=DEMOCRAT VALUE=YES> DEMOCRAT2
<INPUT TYPE=CHECKBOX NAME=DEMOCRAT VALUE=YES CHECKED>DEMOCRAT3

the checkbox will be selected when the browser

opens the form
RADIO BUTTONS
Unlike the items in the selection list, only
one radio button can be selected.

<INPUT TYPE=RADIO NAME=text

VALUE=value>
• text is the name assigned to the field containing
the radio button, value is the value of the radio
button.
Used when need to select only one option (e.g: gender)
RADIO BUTTONS
Example:
<INPUT TYPE=RADIO NAME=Fav. Fruit
VALUE=Apple> Apple
<INPUT TYPE=RADIO NAME=Fav. Fruit
VALUE=Oranges>Oranges
<INPUT TYPE=RADIO NAME=Fav. Fruit
VALUE=Mangoes>Mangoes
HIDDEN INPUT, SUBMIT, RESET
Input of type hidden hold a data in the
form but do not display it.

This is useful for instance when assigning id

for the form

Input type SUBMIT and RESET are used to

display Submit and Reset button
CREATING FORM BUTTONS
Submit and Reset Buttons
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
Variations:
<INPUT TYPE=SUBMIT NAME=DOWN
VALUE=“Download program”>
<INPUT TYPE=RESET VALUE=“Cancel”>
EXERCISE <INPUT>
MULTI LINE TEXT
TEXT AREA
There are 2 types of controls that allow
users to input text.

The INPUT element creates a single-line

input control and the TEXTAREA element
creates a multi-line input control
<TEXTAREA>…</TEXTAREA> PROPERTIES
Property Description
Name Name of tag
Rows Size of rows
Cols Size of columns
Disabled Cannot be changed and not
submitted as data
Readonly Cannot be changed but submitted as
data
Wrap Indicate whether data will be
wrapped to the next line
SAMPLE OF TEXTAREA
Example:
<FORM>
<TEXTAREA NAME=”Comment”
ROWS=“20” COLS=“80”>Enter comments
here </TEXTAREA>
</FORM>
 off

TEXTAREA WRAP
Soft/hard

The comments can be wrapped by

using the WRAP property.
3 types of WRAP options:
<TEXTAREA • off (single line, scrolling left, goes
NAME=”Comment” next line when ENTER is pressed)
ROWS=“20” COLS=“80” • soft/virtual (turns wrapping on,
WRAP=options>Enter does not send text wrapped info to
Web server)
comments here • hard/physical – turns wrapping on,
</TEXTAREA> sends this to Web server
 OTHER
VARIATIONS…
<FORM METHOD=“post” action=“/cgi-bin/formmail”>

<P>

Name: <INPUT type = “text” NAME=”Name”><BR>

Father’s name: <INPUT type = “text” NAME=”Fathersname”><BR>

E-Mail: <INPUT type = “text” NAME=”E-mail”><BR>

<INPUT type=”radio” NAME=”sex” VALUE=”Male”>Male<BR>

<INPUT type=”radio” NAME=”sex” VALUE = ”Female”>Female <BR>

<BUTTON NAME=”Submit” VALUE=”submit” TYPE=”Submit”>

Send<IMG SRC=”wow.jpg” alt=”wow”></BUTTON>

<BUTTON NAME=”Reset” TYPE=”Reset”>

Reset<IMG SRC=”oops.jpg” alt=”oops”></BUTTON></P>

</FORM>
 LIST DOWN BOX

Tag <SELECT>…</SELECT>
Is used to display list down box

Property Description

Name Name of list down box

Multiple Allow multiple selection

ASSIGNMENT (SUBMISSION → I-LEARN → IDISCUSS) ,
INDIVIDUAL & PROVIDE CODE & SCREEN SHOT OF
OUTPUT

Sent to: thanks.html

Method: post

register.html thanks.html