INF2332 Week4

V2009-YSP
Program Studi Teknik Informatika
Pemrograman Web
(INF2332)
Week 4
Advanced XHTML: Working with Forms
Jl. Babarsari 44 Yogyakarta 55281

Telp. +62-274-487711
Fax. +62-274-487748 www.uajy.ac.id
V2009-YSP
Lesson Objectives
Understanding The Used of Forms

Understanding How Forms Work
Understanding How to Creating Accessible
Forms

Telp. +62-274-487711
V2009-YSP
Outline
The Use of Forms

How Forms Work
Creating Accessible Forms

Telp. +62-274-487711
V2009-YSP
The Use of Forms

Telp. +62-274-487711
V2009-YSP
The Use of Forms

Collect Information From Users
information can be collected from end-users by
browsers and sent to servers, or client-side
scripts for processing
the Web would be much less useful without the
ability to request and process user input
e-business and e-commerce are dependent on the
interactive exchange of information between users
and servers
Telp. +62-274-487711
V2009-YSP
The Use of Forms

Collect Information From Users

Telp. +62-274-487711
V2009-YSP
How Forms Work

Telp. +62-274-487711
V2009-YSP
How Forms Work

A form is any section of a web page where a
user can input information
user can enter text into blank fields, make
choices by checking boxes, select options from
menus, and then click a button to send it all
away for processing

Telp. +62-274-487711
V2009-YSP
How Forms Work

A form isnt really complete until its submitted
the information that was entered will be transmitted to
the server in a form data set consisting of all the form
controls and their values.
the job of processing the data set falls to a form handler
(a script or program that has been designed to interpret
and utilize the submitted data)
many form handlers are also designed to validate the entered
values, making sure all the required information has been
entered and properly formatted

Telp. +62-274-487711
V2009-YSP
The Components of a Form

The entirety of a form is wrapped within a
single form element that acts as a container
for the specialized elements that generate
form controls
text fields, checkboxes, menus, and buttons

Telp. +62-274-487711
V2009-YSP

form
defines the portion of an XHTML document that can
receive input from the user
is a block-level element that acts as a container for other
specialized form elements, as well as any other
elements needed to give the form structure
its contents must be held in block-level containers of their own
(a form cannot have inline children)
to include multiple, separate forms within a single document,
each must be contained by its own form element (cant nest a
form within a form)
Telp. +62-274-487711
V2009-YSP

form
the form element requires an action attribute in its
opening tag, whose value is the URL of the form handler
a method attribute is optional and can accept two
values, get or post, to indicate the particular HTTP
method to use when the form is submitted
get: the submitted data set will be appended to the form
handlers URL (from the action attribute) in a query string
consisting of all the forms name/value pairs
post: sends the data set directly to the form handler application
(not in a visible URL query string) for processing at the server
Telp. +62-274-487711
V2009-YSP

form

Telp. +62-274-487711
V2009-YSP

input
many common form controls can be created with the
inline input element, and each type of input control is
defined with a corresponding type attribute
is an empty element, so it can hold no text content, can
hold no other elements, and must be closed with a
trailing slash (/>)
is replaced by a functional form control when a browser
renders the document

Telp. +62-274-487711
V2009-YSP

input type=text
creates a single-line field in which user can type
whatever text that might require, such as a
name, address, or short answer to a question

Telp. +62-274-487711
V2009-YSP

input type=password
similar to a text field, but a password field
obscures the entered text, usually as a series of
asterisks (*) or solid dots

Telp. +62-274-487711
V2009-YSP

input type=checkbox
a choice toggle in the form of a small square
filled with a check mark (or sometimes an x)
when the control is selected

Telp. +62-274-487711
V2009-YSP

input type=radio
somewhat like a checkbox, but only one option
in a set can be selected

Telp. +62-274-487711
V2009-YSP

input type=file
creates a special file upload control, usually
consisting of a text field alongside a browse
button (allowing the user to locate a file on their
computers hard drive or local network, either by
entering the exact file path in the text field or by
clicking the button to invoke their operating
systems built-in file browser)

Telp. +62-274-487711
V2009-YSP

input type=file

Telp. +62-274-487711
V2009-YSP

input type=submit
creates a button that will submit the entire form
data set (all the data entered in the various
controls) when clicked
the controls value attribute sets the text that will
be displayed on the rendered button

Telp. +62-274-487711
V2009-YSP

input type=submit

Telp. +62-274-487711
V2009-YSP

input type=reset
resets the entire form, blanking out anything that
has been entered and setting all controls back to
their initial values

Telp. +62-274-487711
V2009-YSP

input type=button
a generic button that has no inherent function; it
merely serves as a clickable widget that can
trigger a client-side script

Telp. +62-274-487711
V2009-YSP

input type=image
behaves essentially like a submit button;
activating the control will submit the form, but an
input type="image" control allows you to
substitute the standard button with a more
decorative graphic

Telp. +62-274-487711
V2009-YSP

input type=hidden
will not be displayed, it exists simply as a vehicle
to pass along extra data with the submitted form
that a user neednt see or modify (such as an
order number or internal tracking ID) via the
elements value attribute

Telp. +62-274-487711
V2009-YSP

button
works just like a submit, reset, or button input type, or
even an input type="image" control,
activating a button element (with the click of a mouse or
press of a key) will submit or reset the form or trigger a
scripted response
is inline and requires a type attribute (with a value of
submit, reset, or button), and like other form controls, a
button may appear only within a form

Telp. +62-274-487711
V2009-YSP

button
it can contain text or other elements, offering
many more design and semantic options

Telp. +62-274-487711
V2009-YSP

select
creates a selection control, which is a menu of options
from which to choose
the control either may be displayed as a single line that
can drop down and expand to show all the options or
may occupy multiple lines as specified by the optional
size attribute
adding the attribute multiple="multiple" will automatically
convert the select element to a multiline control and
allow the user to choose more than one option by
holding down the Shift, Control, or Command key while
making their choices
Telp. +62-274-487711
V2009-YSP

select

Telp. +62-274-487711
V2009-YSP

select

Telp. +62-274-487711
V2009-YSP

option
each option in a select element is contained by
an option element.
its a nonempty element (requiring a closing
</option> tag) but can contain only a text label
that will be displayed in the select menu, with
each option appearing on its own line within the
menu

Telp. +62-274-487711
V2009-YSP

optgroup
one or more option elements can be sorted into
related sections or categories by wrapping them
in a containing optgroup element
an option group can contain only option
elements; no other elements are allowed, and
cannot nest an optgroup within an optgroup

Telp. +62-274-487711
V2009-YSP

optgroup

Telp. +62-274-487711
V2009-YSP

textarea
creates a multiline field for entering passages of
text too lengthy for a single-line text field (input
(
type="text)
its size is defined by the required rows and cols
attributes, with the value of rows being the
vertical number of text rows and cols being the
number of characters (or columns) on a
horizontal line
Telp. +62-274-487711
V2009-YSP

textarea

Telp. +62-274-487711
V2009-YSP
Creating Accessible
Forms

Telp. +62-274-487711
37
V2009-YSP
Structuring Forms
When construct a form, as with any other
content, we should think about the meaning
and purpose of the content and wrap it in the
most semantically appropriate tags
a usable and accessible form needs a
meaningful structure

Telp. +62-274-487711
V2009-YSP
Structuring Forms
fieldset
encompasses a set of related controls,
collecting them into a logical group
must contain a legend element to provide a title
for the set of fields

Telp. +62-274-487711
V2009-YSP
Structuring Forms
legend
provides a text title or caption for a field set and
hence may appear only within a fieldset element
its an inline element that can contain only text
and other inline elements, but most browsers
will position a legend so that it overlaps the field
sets top border, deviating slightly from typical
inline behavior

Telp. +62-274-487711
V2009-YSP
Structuring Forms
label
creates a text label for a specific control
a label element may contain both the control
and its text label, in which case the connection
between the two elements is implied by context

Telp. +62-274-487711
V2009-YSP
Structuring Forms
example

Telp. +62-274-487711
V2009-YSP
References
Schultz, David, Cook, Craig, 2007, Beginning
HTML with CSS and XHTML: Modern Guide and
Reference, Apress.
Chapter 8
Wang, Paul, Katila, Sandra, 2004, Introduction to

Web Design and Programming, Cambridge
University Press.
Chapter 8
Granell, Craig, 2007, The Essential Guide to CSS

and HTML Web Design, Apress.
Chapter 8
Telp. +62-274-487711
V2009-YSP
Mind Mapping Session

Telp. +62-274-487711
V2009-YSP
Its Discussion Time!
@#!$%&&*(((!#

Telp. +62-274-487711

INF2332 Week4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

INF2332 Week4

Uploaded by

Copyright:

Available Formats

V2009-YSP

Program Studi Teknik Informatika

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

Understanding The Used of Forms

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Use of Forms

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Use of Forms

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Use of Forms

Fax. +62-274-487748 www.uajy.ac.id

The Use of Forms

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

How Forms Work

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

How Forms Work

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

How Forms Work

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281

Fax. +62-274-487748 www.uajy.ac.id

The Components of a Form

Jl. Babarsari 44 Yogyakarta 55281