6

2016.03.16

Forms
o Form
o form
o Form-
o
o
o
o
o
o
o
o
o
o

Text entry controls

Specialized text entry controls
Submit and reset buttons
Pull-down and scrolling menus
File selection and upload control
Dates and times (HTML5)
Numerical controls (HTML5)
Color picker control (HTML5)
Accessibility features
Some control attributes

, ,
.

HTML5
,
.

2
.
1.
2.

HMTL .
An application of script on the web server that processes the
information collected by the form and returns an appropriate
response.

Web application and scripts require programming know-how that

is beyond the scope of this course. However, in your personal
web site, you can create a static page that contains thank you
message as shown the next slide.

HOW FORMS WORK

THE FORM ELEMENT

o

Forms are added to web page using <form></form> element.

The form element is a container for all the content of the form,
including block elements (h1, p, etc). However, it may not
contain another form element.

THE FORM ELEMENT

o

When the browser encodes the data gathered from the previous
slide to the server, it looks like this. You dont need to worry
about this, the browser handles it automatically.

The form element has 2 important attributes.

The action attribute: provides the location (URL) of the application or
script that will be used to process the form.
o The method attribute: specifies how the information should be sent to
the server. There are only two methods; POST or GET.
o

POST: browser sends a separate server request containing some special headers
followed by the data. Only the server sees the content of this request.
7
GET: The data gets tacked right onto the URL sent to the server.

FORM CONTROLS
o

The job of a form control is to collect one bit of information from

a user.
All form control element must include a name attribute, which
provides name for the control, so the form-processing
application can sort the information.

When a user enters a comment in the filed (This is the best band
ever!), it would be passed to the server as a name/value pair like
this.

TEXT ENTRY CONTROLS : SINGLE LINE

o

One of the most common form input types is the text entry field
used for entering a single word or line of text. Add a text input
field to a form with the input element with its type attribute set
to text, as shown here.
The value attribute : specifies default text that appears in the filed
when the form is loaded.
o The maxlength attribute : by default, users can type an unlimited
number of characters in a text field. You can set a maximum character
limit using this attribute.
o

TEXT ENTRY CONTROLS : MULTILINE

o

When you want users to be able enter more than one line of text,
use the textarea (<textarea></textarea>) element.
You can put content between tags and it will show up in the text box
when the form is displayed. It will also get sent to server when the
form is submitted, so carefully consider what goes there. Also, the new
HTML5 placeholder attribute can be used with textarea to provide a
short hint of how to fill in the field.
o The cols and rows attributes are a way of specifying the size of the
textarea using markup, but it is more commonly sized with CSS.
o The maxlength attribute sets a limit on the number of characters.
o

10

SPECIALIZED TEXT ENTRY : PASSWORD

o

A password field works just like a text field, except the

characters area obscured from view using asterisk (*) or bullet.
Add a password input field to a form with the input element with
its type attribute set to password, as shown here.

11

SPECIALIZED TEXT ENTRY : HTML5 TEXT INPUTS

o

In HTML5, the email, tel, url, and search input types let the
browser know what type of information to expect in the field.
Not all browsers support them or support them in the same way.

12

PATERN AND TITLE ATTRIBUTES

o

The pattern attribute specifies a regular expression that the

<input> element's value is checked against.
o The pattern attribute works with the following input types: text,
date, search, url, tel, email, and password.
The global title attribute describes the pattern to help the user.
The title attribute specifies extra information about an element.
o The information is most often shown as a tooltip text when the
mouse moves over the element.

13

REGULAR EXPRESSION
o

A regular expression describes a pattern of characters.

14

REGULAR EXPRESSION
o

This pattern prescribes that the product number should be a single

digit [0-9] followed by three uppercase letters [A-Z]{3}.

Other examples

15

SUBMIT AND RESET BUTTONS

o

The most common button is submit. When clicked or tapped, the

submit button immediately sends the collected data to the server.
A reset button returns the form controls to the state they were in
when the form initially loaded.
Both submit and reset buttons are added using the input element.
By default, the submit button displays with the label Submit
and the reset button is labeled Reset. Change the text on the
button using the value attribute.

16

RADIO AND CHECKBOX BUTTONS

o

A form control made up of a collection of radio buttons is

appropriate when only one option from the group is permitted.
o

When one radio button is on, all of the others must be off.

Radio buttons are added to a form using the input element with
the type attribute set to radio.
To bind multiple radio inputs into set, you use their name
attributes set to the same value.
o

You can decide which button is checked when the form loads by
adding the checked attribute to the input element.

17

RADIO AND CHECKBOX BUTTONS

o

When checkboxes are grouped together, it is possible to select as

many or as few from the group as desired.
As with radio buttons, you create groups of checkboxes by
assigning them the same name value.
o

But, they dont necessarily need to be used in groups.

The value of every checked button will be sent to the server

when the form is submitted.

18

DROP-DOWN OR SCROLLING MENUS

o
o
o

Another way to provide a list of choices is to put them in menu.

You add menu to a form with the select element.
This displays a drop-down menu when no size is specified or if
the size attribute is set to 1. Only one item may be selected.
The select element is just a container for a number of option
element.
o

The content of the chosen option element is what gets passed to the
server. If you want to send a different value, use the value attribute.

19

DROP-DOWN OR SCROLLING MENUS

o

To make the menu displays as a scrolling list, simply specify the

number of lines youd like to be visible using the size attribute of
the select element.
The multiple attribute allows users to make more than one
selection from the scrolling list.
Use the selected attribute in an option element to make it the
default value. It applies to drop-down menu as well.

20

DROP-DOWN OR SCROLLING MENUS

o

You can use the optgroup element to create conceptual groups of

options.
The required label attribute in the optgroup element provides the
heading for the group.

21

FILE SELECTION CONTROL

o
o
o

o
o

The file selection control makes it possible for users to select a document from
the hard drive to be submitted with the form data.
It is added to the form using the input element with its type set to file.
When a form contains a file selection input element, you must specify the
enctype attribute of the form as multipart/form-data and also use the POST
method.

To permit multiple file uploads, well need to add the multiple attribute.
We can also restrict what files can be uploaded in the browser with the accept
22
attribute.

DATE AND TIME CONTROLS (HTML5)

o

HTML5 introduces 6 input types that make date and time selection
widgets part of a browsers standard built-in display capabilities.
1.

23

NUMERICAL INPUTS (HTML5)

o

The number and range input types collect numerical data.

Both types accept the optional min and max attributes for specifying the
minimum and maximum values allowed for the input.
o The step attribute allows to specify the acceptable increments. Default
is 1. A value of 0.5 permits 1, 1.5, 2, 2.5 etc.
o

24

COLOR SELECTOR (HTML5)

o

The intent of the color control type is to create a pop-up color

picker for visually selecting a color value.
Values are provided in hexadecimal RGB values (#RRGGBB).

25

FORM ACCESSIBILITY FEATURES

o

It is essential to consider how users without the benefit of visual

browsers will be able to understand the web form.
The label element associates descriptive text with its respective
form field. There are 2 ways of using the label element.

Another advantage to using labels is that users can click or tap

anywhere on them to select the form element.

26

FORM ACCESSIBILITY FEATURES

o
o

The fieldset element indicates a logical group of form controls.

It may also include a legend element that provides a caption for
the enclosed fields.

27

SOME CONTROL ATTRIBUTES

o

There are the following useful attributes that applies to the most of
form controls
Required (HTML5): By adding this, we were asking the browser
to make sure this field has been filled out before submitting.

placeholder (HTML5): offers a hint to the user about what

format this field expects.

28

SOME CONTROL ATTRIBUTES

o

HTML5 adds the following useful attributes to form controls.

disabled: When a form element is disabled, it cannot be
selected.
readonly: when a form element is readonly, it prevents user
from changing the value of the form control although it can be
selected.
autofocus (HTML5): indicates the control should be ready for
input when the page loads.
multiple (HTML5): allows users to input (or select) more than
one value.

29