CHAPTER 2:

HTML Form

Prepared for:
CSC264 – Introduction to Web and
Mobile Application
OVERVIEW OF THIS CHAPTER

In this chapter, you will learn

about:
 Controls
 Input Elements
 Dropdown List
 Text Area
 Using Fieldsets
 Labels
 HTML FORM

What is the purpose

of a FORM?

Is used to collect data from

the users

HOW?

By allowing user to enter data,

which will then be sent to a server for
processing
 HTML FORM

HTML Form:
 To create a form within a HTML document, a form element is
used:

<form attributes>
form elements Provide controls on how
</form> data can be collected
E.g: text input,checkboxes, radio
buttons

 The form tag may contain the following

attributes:
Attribute Purpose
name Used to give a name to a form

action Used to specify the address where you want to pass the
data
method Will define how the data will
be sent (either by POST or
GET)
 HTML FORM

HTML Form:
 For
example:
<form name=“testForm” action=“order.php” method=“get”>
<!--form elements-->
</form>

What is the difference

between
GET and POST ?
 HTML FORM: METHOD
HTML Form:
1. GET method (default):
 The data sent will be encoded into a URL, which means that:
Data will be appended to the page request
 The page and the encoded data are separated by ? (GET request)
 You can use this when:
• You want the GET request to remain in the browser history
• You want to allow the GET request to be bookmarked
• TIP: Use this when you don’t mind the request being repeated
 DO NOT use this when:
• You are dealing with sensitive information
• You want to send more than 1024 characters
http://www.abc.com/result.html?firstname=Michael&lastname=Jackson

Page Request Data

Sent
GET Request
 HTML FORM: METHOD
HTML Form:
2. POST method:
 The data will be sent through a different page request called
HTTP header
 Will offer better security because:
The submitted data is not visible in the page address
 Will have no restrictions on data length, and data other than
strings can be sent to the server
 When refreshed, browser will give an alert whether the data
should be
re-submitted or not
 However, it will not remain in the browser history or be
bookmarked
 TIP: Use this when the request will alter the database

http://www.abc.com/result.html Page Request

firstname=Michael&lastname=Jackson Data sent using POST
request
 HTML FORM: CONTROLS

HTML Form Controls:

 When there’s a form within the webpage:
1. Users are able to modify its controls in order to complete the
elements within the form (entering text, selecting menu
items,etc.)
2. After completing the form, users will submit the form for processing
(to a Web server etc.)
 Each form element can be controlled by the user

Uses the input element

<form>
<input type =“...”name =“...”>
</form>
HTML FORM: CONTROLS
<form>
<input type =“...”name =“...”> What do you think
this attribute is
</form>
for?

Value Description

email Defines a field for an e-mail address

number Defines a field for entering a number

password Defines a password field (characters are masked)

radio Defines a radio button

reset Defines a reset button (resets all form values to default values)

submit Defines a submit button

text Default. Defines a single-line text field (default width is 20 characters)

checkbox Defines a checkbox

button Defines a clickable button (mostly used with a JavaScript to activate a

script)

date Defines a date control (year, month and day (no time))
 HTML FORM: CONTROLS
<form>
<input type =“...”name
=“...”>
</form>
Value Description

time Defines a control for entering a time (no time zone)

month Defines a month and year control (no time zone)

file Defines a file-select field and a "Browse..." button (for file uploads)

hidden Defines a hidden input field

image Defines an image as the submit button

range Defines a control for entering a number whose exact value is not important (like a slider control). Default
range is from 0 to 100

search Defines a text field for entering a search string

tel Defines a field for entering a telephone number

url Defines a field for entering a URL

week Defines a week and year control (no time zone)

datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second
(no time zone)

color Defines a color picker

 HTML FORM: CONTROLS
Text Input Control (Single Line):

Other
attributes
 HTML FORM: CONTROLS
Text Input Control (Single Line):
 HTML FORM: CONTROLS

Attributes for Text Field:

Attribute Purpose
type Indicates the type of input control will be set to
text
name Will give a name to the
control: Allow server to
recognize the data
value This can be used to provide an initial value inside
the control
size Will specify the width of the text-input control in
terms of
characters
maxlength Will specify the maximum number of
characters a user can enter into the text box

placeholder Specifies a short hint that describes the expected

value
HTML FORM: CONTROLS
 HTML FORM: CONTROLS
Text Input Control (Password):
 HTML FORM: CONTROLS
Text Input Control (Multiple Line):

Uses an
element
called
textarea
 HTML FORM: CONTROLS
Buttons (Submit):

Buttons (Reset):
 HTML FORM: CONTROLS
Buttons (Push Button):
 Push buttons have no default behaviour:
It is set to perform some operation when pressed
(could use client-side scripting to trigger an event
when clicked)
 HTML FORM: CONTROLS
Grouping Form Data:
 The elements within the form can be grouped accordingly by using the
fieldset element
 To give a caption for a group of elements, you can use the legend element
 HTML FORM: CONTROLS
Radio Button Control:
 Usually radio buttons are
used when you want the
user to select only one
option of data out of
many options given

Why was it given the

same name?
 HTML FORM: CONTROLS
Checkbox Control:
 Usually checkboxes are used
when you want to allow the
user to select more than one
option of data
 HTML FORM: CONTROLS
Select Box/Drop Down List
Control:
 Usually a drop down list is
used when you want the
user to select data out of
the list of options given
 HTML FORM: CONTROLS

Select Box/Drop Down List Control:

 There are other attributes that you can use for the
select tag:
Attribute Purpose
size Used to present a scrolling list box
multiple Allows user to select multiple items from the
menu

 There are other attributes that you can use for the
option tag:
Attribute Purpose
selected Specifies that this option should be the initially selected
value when the page loads
HTML FORM: CONTROLS

Presented as
a
scrolling
list
HTML FORM: CONTROLS

Allow users
to choose
multiple
options
HTML FORM: CONTROLS

Data will be
initially
selected
 HTML FORM: LABELS

Label Element:
 Is used to create a caption for a form control
 Allows user to click on the label, and it will be treated like clicking on
the
associated input element

Uses id
an to
label inp
the ut