HTML5 and CSS3

7th Edition

Tutorial 7
Designing a Web Form
 Objectives XP

• Explore web forms

• Work with form servers
• Create forms and field sets
• Create labels and input boxes
• Explore form layout
• Work with date and time fields
• Create a selection list

New Perspectives on HTML5 and CSS3, 7th Edition 2

 Objectives (continued) XP

• Create option buttons

• Create check boxes and text area boxes
• Create spinners and range sliders
• Use data lists
• Create form buttons
• Validate a form
• Apply validation styles

New Perspectives on HTML5 and CSS3, 7th Edition 3

 Structure of a Web Form XP

New Perspectives on HTML5 and CSS3, 7th Edition 4

 Introducing Web Forms XP

• Web form
– Allows users to enter data that can be saved and
processed
– Common way to accept user input
– Allows the creation of interactive websites for user
feedback

New Perspectives on HTML5 and CSS3, 7th Edition 5

 Parts of a Web Form XP

• Controls, also known as widgets, are the

objects that allow a user to interact with a
form
• Each data entry control is associated with a
data field
• Data field: Stores the data values supplied by a
user

New Perspectives on HTML5 and CSS3, 7th Edition 6

 Parts of a Web Form (continued 1)XP
• Types of controls
– Input boxes to insert text and numeric values
– Option/radio buttons to select data values from a
predefined set of options
– Selection lists to select data values from an
extensive list of options
– Check boxes to select data values limited to two
possibilities, such as “yes” or “no”
– Text area boxes to enter text strings that may
include several lines of content

New Perspectives on HTML5 and CSS3, 7th Edition 7

 Parts of a Web Form (continued 2)XP
• Types of widgets
– Spin boxes to enter integer values confined to a
specified range
– Slider controls to enter numeric values confined to
a specified range
– Calendar controls to select date and time values
– Color pickers to choose color values

New Perspectives on HTML5 and CSS3, 7th Edition 8

 Parts of a Web Form (continued 3)XP

New Perspectives on HTML5 and CSS3, 7th Edition 9

 Forms and Server-Based ProgramsXP
• Field values entered by a user are processed
by a program running on the user’s computer
or on a web server in a secure location
• Example: A web form is used to collect data
from a customer for an order and the server
program processes the data and handles the
billing and delivery

New Perspectives on HTML5 and CSS3, 7th Edition 10

 Forms and Server-Based Programs XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 11

 Starting a Web Form XP

• Web forms are marked using the form

element
<form id=“text” attributes>
content
</form>
– id identifies the form
– attributes specify how the form should be
processed by the browser
– content is the form’s content

New Perspectives on HTML5 and CSS3, 7th Edition 12

 Starting a Web Form (continued) XP

• A form element can be placed anywhere

within the body of a page
• Forms also can contain page elements such as
tables, paragraphs, inline images, and
headings

New Perspectives on HTML5 and CSS3, 7th Edition 13

 Interacting with the Web Server XP

• The action, method, and enctype attributes

have to be included in a form to specify where
and how to send the form data
<form action=“url” method=“type”
enctype=“type”>
content
</form>

New Perspectives on HTML5 and CSS3, 7th Edition 14

 Interacting with the Web Server XP
(continued 1)
– action attribute provides the location of the web
server program that processes the form
– method attribute specifies how the browser
should send form data to the server
– enctype attribute specifies how the form data
should be encoded as it is sent to the server

New Perspectives on HTML5 and CSS3, 7th Edition 15

 Interacting with the Web Server XP
(continued 2)
• Two possible values for method attribute
– Get method: Tells the browser to append the form
data to the end of the URL specified in the action
attribute
– The get method is the default method
– Post method: Sends the form data in its own
separate data stream
– The post method is considered to be a more
secure form of data transfer

New Perspectives on HTML5 and CSS3, 7th Edition 16

 Interacting with the Web Server XP
(continued 3)
• The enctype attribute has three possible
values

New Perspectives on HTML5 and CSS3, 7th Edition 17

 Interacting with the Web Server XP
(continued 4)

New Perspectives on HTML5 and CSS3, 7th Edition 18

 Interacting with the Web Server XP
(continued 5)
• A script element is an HTML element used to
access and run JavaScript programs that will
run within the user’s browser

New Perspectives on HTML5 and CSS3, 7th Edition 19

 Creating a Field Set XP

• Field set: Groups fields that share a common

purpose
• Field sets are created using the fieldset
element
<fieldset id=“id”>
content
</fieldset>
– id identifies the field set
– content is the form content within the field set

New Perspectives on HTML5 and CSS3, 7th Edition 20

 Marking a Field Set XP

New Perspectives on HTML5 and CSS3, 7th Edition 21

 Adding a Field Set Legend XP

• Legend describes the content of a field set

using the legend element
<legend>text</legend>
where text is the text of the legend
• The legend element contains only text and no
nested elements
• By default, legends are placed in the top-left
corner of the field set box and can be moved
to a different location using the CSS
positioning styles
New Perspectives on HTML5 and CSS3, 7th Edition 22
 Adding a Field Set Legend (continued)XP

New Perspectives on HTML5 and CSS3, 7th Edition 23

 Creating Input Boxes XP

• Syntax for the input element

<input name=“name” id=“id”
type=“type” />
– The name attribute provides the name of the data
field associated with the control
– The id attribute identifies the control in which the
user enters the field value
– The type attribute indicates the data type of the
field

New Perspectives on HTML5 and CSS3, 7th Edition 24

 Creating Input Boxes (continued 1)XP

New Perspectives on HTML5 and CSS3, 7th Edition 25

 Creating Input Boxes (continued 2)XP

New Perspectives on HTML5 and CSS3, 7th Edition 26

 Input Types and Virtual KeyboardsXP
• Virtual keyboards are software
representations of a physical device
• Web forms can be made responsive by
displaying different virtual keyboards for each
input type
• Example: An input box for telephone number
is more convenient to read with digits
displayed prominently on the keyboard

New Perspectives on HTML5 and CSS3, 7th Edition 27

 Adding Field Labels XP

• To associate a text string with a control, the

text string has to be enclosed within the label
element
<label for=“id”>label text</label>
– id is the id of the control that is associated with
the label
– label text is the text of the label

New Perspectives on HTML5 and CSS3, 7th Edition 28

 Adding Field Labels (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 29

 Designing a Form Layout XP

• There are two general layouts

– Labels are placed directly above the input controls
– Labels and controls are placed side-by-side

New Perspectives on HTML5 and CSS3, 7th Edition 30

 Defining Default Values and XP
Placeholders
• The value attribute is used to specify a default
field value

New Perspectives on HTML5 and CSS3, 7th Edition 31

 Defining Default Values and PlaceholdersXP
(continued 1)
• Placeholders: Text strings that appear within a
form control, providing a hint about the kind
of data that should be entered into a field
• They are defined using the placeholder
attribute
placeholder=“text”
where text is the text of the placeholder

New Perspectives on HTML5 and CSS3, 7th Edition 32

 Defining Default Values and PlaceholdersXP
(continued 2)

New Perspectives on HTML5 and CSS3, 7th Edition 33

 Defining Default Values and PlaceholdersXP
(continued 3)

New Perspectives on HTML5 and CSS3, 7th Edition 34

 Entering Date and Time Values XP

• Date and time fields ensure that users enter

data in the correct format
• Indicated using type attributes: date, time,
datetime-local, month, and week

New Perspectives on HTML5 and CSS3, 7th Edition 35

 Creating a Selection List XP

• A selection list is a list box that presents users

with a group of possible values for the data
field
• The list is created using the select and option
elements
<select name=”name”>
<option value=”value1”>text1</option>
<option value=”value2”>text2</option>
...
</select>

New Perspectives on HTML5 and CSS3, 7th Edition 36

 Creating a Selection List (continued 1)XP
– name is the name of the data field
– value1, value2,… are the possible field values
– text1, text2,… are the text of the entries in the
selection list that users see on the web form

New Perspectives on HTML5 and CSS3, 7th Edition 37

 Creating a Selection List (continued 2)XP

New Perspectives on HTML5 and CSS3, 7th Edition 38

 Working with Select Attributes XP

• By default, a selection list appears as a drop-

down list box
• To display a selection list as a scroll box, use
the size attribute to the select element
<select size=“value”> ... </select>
where value is the number of options that the
selection list displays at one time

New Perspectives on HTML5 and CSS3, 7th Edition 39

 Working with Select Attributes (continued 1)
XP

• By default, selection lists allow only one

selection from the list of options
• To allow more than one item to be selected,
add multiple attribute
<select multiple> ... </select>

New Perspectives on HTML5 and CSS3, 7th Edition 40

 Working with Select Attributes (continued 2)
XP

• Two ways for users to select multiple items

from a selection list
– For non-contiguous selection, press and hold the
Ctrl key while making the selections
– For contiguous selection, select the first item,
press and hold the Shift key, and then select the
last item in the range

New Perspectives on HTML5 and CSS3, 7th Edition 41

 Grouping Selection Options XP

• Organize selection list options by placing them

in option groups using the optgroup element
<select>
<optgroup label=”label1”>
<option>text1</option>
<option>text2</option>
</optgroup>
</select>
where label1 is the label for the different
groups of options
New Perspectives on HTML5 and CSS3, 7th Edition 42
 Grouping Selection Options (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 43

 Creating Option Buttons XP

• Option buttons are also called radio buttons

• Unlike selection lists, the options appear as
separate controls in the web form
• They are created with a group of input
elements with a type attribute value of
“radio”
<input name=“name” value=“value1”
type=“radio” />

New Perspectives on HTML5 and CSS3, 7th Edition 44

 Creating Option Buttons (continued 1)
XP

<input name=“name” value=“value2”

type=“radio” />
…
where name is the name of the data field and
value1, value2, value3,… are the field values
associated with each option
• Set an option button to be selected as the default by
adding the checked attribute to the input element
• <input name=”name” type=”radio” checked
/>

New Perspectives on HTML5 and CSS3, 7th Edition 45

 Creating Option Buttons (continued 2)
XP

New Perspectives on HTML5 and CSS3, 7th Edition 46

 Creating Check Boxes XP

• Check boxes are designed for fields that record

the presence or absence of an object or event
• They are created using the input element with
the type attribute set to “checkbox”
<input name=“name” value=“value”
type=“checkbox” />
– value attribute contains the value of the field
when the check box is checked
– type attribute indicates that the input box is a
check box

New Perspectives on HTML5 and CSS3, 7th Edition 47

 Creating Check Boxes (continued)XP
• By default, a check box is not checked

New Perspectives on HTML5 and CSS3, 7th Edition 48

 Creating a Text Area Box XP

• Text area is created using the textarea

element
<textarea name=“name”>
text
</textarea>
where text is the default value of the data
field

New Perspectives on HTML5 and CSS3, 7th Edition 49

 Creating a Text Area Box (continued 1)
XP

• HTML supports the rows and cols attributes

to set the text area size
<textarea rows=”value” cols=”value”>
...
</textarea>
– rows attribute specifies the number of lines in the
text area box
– cols attribute specifies the number of characters
per line

New Perspectives on HTML5 and CSS3, 7th Edition 50

 Creating a Text Area Box (continued 2)
XP

New Perspectives on HTML5 and CSS3, 7th Edition 51

 Entering Numeric Data XP

• Creating a Spinner Control

– Spinner control: Displays an up or down arrow to
increase or decrease the field value by a set
amount
– To create a spinner control, apply the input
element using the number data type

New Perspectives on HTML5 and CSS3, 7th Edition 52

 Entering Numeric Data (continued 1) XP

New Perspectives on HTML5 and CSS3, 7th Edition 53

 Entering Numeric Data (continued 2)
XP

• Creating a Range Slider

– Slider control: Limits a numeric field to a range of
possible values
– To create a slider control, apply the range data
type in the input element

New Perspectives on HTML5 and CSS3, 7th Edition 54

 Entering Numeric Data (continued 3)
XP

New Perspectives on HTML5 and CSS3, 7th Edition 55

 Suggesting Options with Data ListsXP
• Data list: A list of possible data values that a
form field can have
• Data lists are defined using the datalist
element
<datalist id=”id”>
<option value=”value” />
<option value=”value” />
…
</datalist>

New Perspectives on HTML5 and CSS3, 7th Edition 56

 Suggesting Options with Data Lists XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 57

 Working with Form Buttons XP

• Form buttons: A type of form control that

performs an action
• Actions performed
– Run a command from a program linked to the web
form
– Submit the form to a program running on the web
server
– Reset the form fields to their default values

New Perspectives on HTML5 and CSS3, 7th Edition 58

 Creating a Command Button XP

• Command button: Runs a program that affects

the content of a page or the actions of a
browser
• Created using the input element with the
type attribute set to button
<input value=“text” onclick=“script”
type=“button” />
– text is the text that appears on the button
– script is the name of the program code that is
run when the button is clicked by the user
New Perspectives on HTML5 and CSS3, 7th Edition 59
 Creating Submit and Reset Buttons
XP

• Submit button: Submits a form to the server

for processing when clicked
• Submit button is created using input elements
with the type attribute set to “submit” and
“reset” respectively
<input value=“text” type=“submit” />
where text is the text string that appears on
the button

New Perspectives on HTML5 and CSS3, 7th Edition 60

 Creating Submit and Reset Buttons XP
(continued 1)
• Reset button: Resets a form, changing all
fields to their default values and deleting any
field values that a user has entered
• Reset button is created using input elements
with the type attribute set to “reset”
<input value=“text” type=“reset” />
where text is the text string that appears on
the button

New Perspectives on HTML5 and CSS3, 7th Edition 61

 Creating Submit and Reset Buttons XP
(continued 2)

New Perspectives on HTML5 and CSS3, 7th Edition 62

 Designing a Custom Button XP

• The appearance of a command, submit, and

reset button is determined by the browser
• For more control over a button’s appearance
use the button element
<button type=“text”>
content
</button>
– type attribute specifies the button type
– content are HTML elements placed within the
button
New Perspectives on HTML5 and CSS3, 7th Edition 63
 Validating a Web Form XP

• Validation: Process of ensuring that a user has

supplied valid data
• Types of validation
– Server-side validation – validation occurs on the
web server
– Client-side validation – validation occurs in the
user’s browser

New Perspectives on HTML5 and CSS3, 7th Edition 64

 Identifying Required Values XP

• The first validation test is to verify if data is

supplied for all the required data fields
• Add the required attribute to the control to
identify the required data fields
• If a required field is left blank, the browser will
not submit the form returning an error
message to indicate the unavailability of data

New Perspectives on HTML5 and CSS3, 7th Edition 65

 Validating Based on Data Type XP

• A form fails the validation test if the data

values entered into a field do not match the
field type
• Example:
– A data field with the number type will be rejected
if nonnumeric data is entered
– Fields with email and url types will be rejected if
a user provides an invalid e-mail address or text
that does not match the format of a URL

New Perspectives on HTML5 and CSS3, 7th Edition 66

 Testing for a Valid Pattern XP

• To test whether a field value follows a valid

pattern of characters, test the character string
against a regular expression
• Regular expression or regex is a concise
description of a character pattern
• To validate a text value against a regular
expression, add the pattern attribute to the
input element

New Perspectives on HTML5 and CSS3, 7th Edition 67

 Testing for a Valid Pattern (continued)
XP

• Example: The value of the custZip field against

the regular expression pattern ^\d{5}$
<input name=“custZip”
pattern=“^\d{5}$” />
where regular expression ^\d{5}$ represents
any string of five numeric characters

New Perspectives on HTML5 and CSS3, 7th Edition 68

 Defining the Length of the Field ValueXP
• The syntax to define the maxlength attribute
is <input maxlength=“value” />
where value is the maximum number of
characters in the field value
• Example:
<input name=”custZip” maxlength=“5” />
• The maxlength attribute does not distinguish
between characters and digits

New Perspectives on HTML5 and CSS3, 7th Edition 69

 Applying Inline Validation XP

• Inline validation: The technique of immediate

data validation and reporting of errors
• The focus pseudo-class is used to change the
display style of fields that currently contain
invalid data
• Focus: The state in which an element has been
clicked by the user, making it the active
control on the form

New Perspectives on HTML5 and CSS3, 7th Edition 70

 Applying Inline Validation (continued 1)XP

New Perspectives on HTML5 and CSS3, 7th Edition 71

 Applying Inline Validation (continued 2)XP
• Example: To create styles for all of the checked
option buttons in the form, apply the checked
pseudo-class
input[type=”radio”]:checked {
styles
}
• styles are the CSS styles applied to checked
option buttons

New Perspectives on HTML5 and CSS3, 7th Edition 72

 Pseudo-Classes for Valid and Invalid XP
Data
• The valid and invalid pseudo-classes are
used to format controls based on whether
their field values pass/fail a validation test
• Example: To display input elements
containing valid data with a light green
background, use the following style rule:
input:valid {
background-color: rgb(220, 255, 220);
}

New Perspectives on HTML5 and CSS3, 7th Edition 73

 Pseudo-Classes for Valid and Invalid XP
Data (continued 1)
• Example: To display input elements
containing invalid data with a light red
background with focus, use the following style
rule:
input:focus:invalid {
background-color: rgb(255, 232,
233);
}

New Perspectives on HTML5 and CSS3, 7th Edition 74

 Pseudo-Classes for Valid and Invalid XP
Data (continued 2)

New Perspectives on HTML5 and CSS3, 7th Edition 75