1

Forms
 Content 2

1 How forms work 4 Form Design Basics

2 Elements for adding form Widgets

3 Making Form Accessible

 How Forms Work 3

There are two parts to a working form:

1) Form that you see on the page itself that
is created using HTML markup. Forms
are made up of buttons, input fields, and
drop-down menus (collectively known as
form controls) used to collect
information from the user.
2) The other component of a web form is
an application or script on the server
that processes the information collected
by the form and returns an appropriate
response.
 The Form Element 4

• Forms are added to web pages with the form element. The form element is a
container for all the content of the form, including some number of form controls, such
as text-entry fields and buttons.
 The Method Attribute 5

• The method attribute specifies how the information should be sent to the server.

• There are only two methods for sending this encoded data to the server: POST or
GET, indicated by the method attribute in the form element.

• The method is optional and will default to GET if omitted.

The GET Method

• The encoded form data gets tacked right onto the URL sent to the server. A question
mark character separates the URL from the following data:
 The Method Attribute… 6

The POST Method

• The browser sends a separate server request containing some special headers
followed by the data. In theory, only the server sees the content of this request.
• It is also preferable for sending a lot of data, such as a lengthy text entry, because
there is no character limit as there is for GET.
• The GET method is appropriate if users to be able to bookmark the results of a form
submission, Because the content of the form is in plain sight, GET is not appropriate
for forms with private personal or financial information.
• In addition, GET may not be used when the form is used to upload a file.
 Form Controls 7

Markup that adds form controls to the page. This

section introduces the elements used to create
the following:

• Text-entry controls
• Specialized text-entry controls
• Submit and reset buttons
• Radio and checkbox buttons
• Pull-down and scrolling menus
• File selection and upload control
• Hidden controls
• Dates and times
• Numerical controls
• Color picker control
 Text-Entry Controls 8

• Which element you use to collect text input depends on whether users enter a single
line of text (input) or multiple lines (textarea).
Specialized Text-Entry Fields 9
 Drop-Down Suggestions 10

• The datalist element allows the author to provide a drop-down menu of suggested
values for any type of text input. It gives the user some shortcuts to select from, but if
none are selected, the user can still type in their own text. Within the datalist element,
suggested values are marked up as option elements. Use the list attribute in the input
element to associate it with the id of its respective datalist.
Submit and Reset Buttons 11
 Radio and Checkbox Buttons 12

• Both checkbox and radio buttons make it simple for your visitors to choose from a
number of provided options.
 Drop-Down and Scrolling Menus 13

• Drop-down and scrolling menus added to a form with the select element. Whether the
menu pulls down or scrolls is the result of how you specify its size and whether you
allow more than one option to be selected.
 Drop-Down and Scrolling Menus 14

• You can use the optgroup element to create conceptual groups of options. The
required label attribute provides the heading for the group
 File Selection Control 15

• The file selection control makes it possible for users to select a document from the
hard drive to be submitted with the form data.
 Hidden Controls 16

• There may be times when you need to send information to the form processing
application that does not come from the user. In these instances, you can use a hidden
form control that sends data when the form is submitted, but is not visible when the
form is displayed in a browser.
 Date and Time Controls 17

• HTML5 introduced six new input types that make date and time selection widgets part
of a browser’s standard built-in display capabilities
 Date and Time Controls… 18

• HTML5 introduced six new input types that make date and time selection widgets part
of a browser’s standard built-in display capabilities
19
 Numerical Inputs 20

• For the number input, the browser may supply a spinner widget with up and down
arrows for selecting a specific numerical.

• The range input is typically displayed as a slider that allows the user to select a value
within a specified range.
 Color Selector 21

The intent of the color control

type is to create a pop-up
color picker for visually
selecting a color value similar
to those used in operating
systems or image-editing
programs.
 Form Accessibility Features 22

• The label, fieldset, and legend form elements improve accessibility by making the
semantic connections between the components of a form clear.
Form Accessibility Features… 23
 Form Layout and Design 24

• Some sampling tips for better web forms:

• Usable Forms
a) Avoid unnecessary questions
b) Consider the impact of label placement
c) Choose input types carefully
d) Group related inputs
e) Clarify primary and secondary actions

• Styling Forms: Use style sheets to create a clean form layout as well as change the
appearance of most form controls. Something as simple as nice alignment and a look
that is consistent with the rest of your site can go a long way toward improving the
impression you make on a user.
Thank you