XP

Chapter 6 Form

1
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

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

3
Structure of a Web Form https://www.w3schools.com/howto/tryit.asp?filename=tryho
XP
w_css_responsive_form

Chapter 2 Developing a Web SIte 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

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

6
Parts of a Web Form (continued 1)XP
• Types of form controls/form elements/data
fields
– 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
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

8
Parts of a Web Form (continued 3)XP

https://www.w3schools.com/html/html_form_elements.asp
https://www.w3schools.com/html/html_form_attributes.asp 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

Chapter 2 Developing a Web SIte 10

Forms and Server-Based Programs XP
(continued)

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

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

Chapter 2 Developing a Web SIte 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 id=“text” attributes>
content
</form>

<form id=“text” action=“url” method=“type”

enctype=“type”>
content
</form>

Chapter 2 Developing a Web SIte 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

<form id=“text” action=“url” method=“type”

enctype=“type”>
content
</form>

15
Interacting with the Web Server XP
(continued 2) https://www.w3schools.com/tags/att_form_method.asp

how the browser should send form data to the server

• 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
Exmaple : /test/demo_form.php?name1=value1&name2=value2
– 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
Example : POST /test/demo_form.php HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
16
https://www.w3schools.com/tags/att_form_method.asp
XP

17
Interacting with the Web how the form data should be encoded as it
is sent to the server. Note: The enctype XP
Server (continued 3) attribute can be used only if method="post".

• The enctype attribute has three possible values

https://www.w3schools.com/tags/att_form_enctype.asp
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_enctype

<input type="file" style="border:solid 1px black">

18
 XP

https://www.w3schools.com/code/tryit.asp?filename=GOU2ELK3U10B

19
Interacting with the Web Server XP
(continued 4)

https://www.w3schools.com/tags/att_form_enctype.asp

20
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

21
 XP

rb_formsubmit.js
window.onload = setForm;

function setForm() {
document.forms[0].onsubmit = function() {
if (this.checkValidity()) alert("No invalid data detected. Will retain data for further
testing.");
return false;
}
}
When the form is submitted, the onsubmit event handler
verifies that the form data is complete and valid.
An alert box is displayed notifying the user.

The event function returns a value of false so that the

student does not have to continually retype test values
in the survey form. 22
 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

Chapter 2 Developing a Web SIte 23

 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

24
Field Set &
Legend XP

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset 25
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

26
Parts of a Web Form (continued 3)XP

form elements,
form controls,
widgets, input
field, data field,
input element

https://www.w3schools.com/html/html_form_input_types.asp
https://www.w3schools.com/html/html_form_elements.asp
Chapter 2 Developing a Web SIte 27
Creating Input Boxes (continued 1)
XP
https://www.w3schools.com/html/html_form_input_types.asp
https://www.w3schools.com/html/html_form_elements.asp

28
XP

29
 XP
https://
www.w3schools.com/tags/tr
yit.asp?filename=tryhtml5_i
nput_type_tel

https://
www.w3schools.c
om/html/tryit.asp?f
ilename=tryhtml_i
nput_text

Chapter 2 Developing a Web SIte 30

Input Types and Virtual KeyboardsXP
• Virtual keyboards are
software
representations of a
physical device

31
 XP

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

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" ><br><br>
</form> 32
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

33
Adding Field Labels (continued) XP

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_tel

34
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

35
 Introducing Flexible Boxes
XP
tf_flex.css
tf_prek.html

https://www.w3schools.com/css/
tryit.asp?filename=trycss3_flexb
ox_flex-direction_column

Defining a Flexbox
https://www.w3schools.c
• To display an element as a flexbox, apply the display style om/css/css3_flexbox.as
display: flex; p
• To set the orientation of the flexbox, apply the style
flex-direction: direction;
where direction is row (the default), column, row-reverse, or column-reverse.
• To define whether or not flex items wrap to a new line, apply the style
flex-wrap: type;
where type is either nowrap (the default), wrap to wrap flex items to a new line, or wrap-reverse to wrap flex
items to a new line starting in the opposite direction from the current line.
• To define the flow of items within a flexbox, apply the style
flex-flow: direction wrap;
where direction is the direction of the flex items and wrap defines whether the items will be wrapped to a
new line when needed. 36
Sizing Flex Items XP
https://www.w3schools.com/css/
• To set the initial size of a flex item, apply the style css3_flexbox.asp

flex-basis: size;
where size is measured in one of the CSS units of measurement or as a
percentage
of the size of the flexbox or the keyword auto (the default).
• To define the rate at which a flex item grows from its basis size, apply the style
flex-grow: value;
where value is a non-negative value that expresses the growth of the flex item
relative to the growth of the other items in the flexbox (the default is 0).
• To define the rate at which a flex item shrinks below its basis value, apply
flex-shrink: value;
where value is a non-negative value that expresses the shrink rate of the flex
item
relative to other items in the flexbox (the default is 0).
• To define the overall resizing of a flex item, apply
flex: grow shrink basis;
where grow defines the growth of the flex item, shrink provides its shrink rate,
37
and
 XP

150px

38
 300px
XP

150px

39
 XP

https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides

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

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_value 41
Defining Default Values and Placeholders XP
(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

42
Defining Default Values and Placeholders XP
(continued 2)https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_tel

43
Defining Default Values and Placeholders XP
(continued 3)

44
 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

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime-local
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date_max_min
Chapter 2 Developing a Web SIte 45
https://
www.w3schools.c
XP
om/html/tryit.asp?
filename=tryhtml_
input_datetime-lo
cal

https://
www.w3schools.c
om/html/tryit.asp?
filename=tryhtml_
input_date_max_
min

46
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>

47
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

48
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_pre

Creating a Selection List (continued 2)XP

49
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
• 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>

50
 Working with Select Attributes (continued 1)XP

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_multiple

51
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

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_multiple

52
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
53
 Grouping Selection Options (continued) XP

https://
www.w3schools.com/tags/tryit.asp?filenam
e=tryhtml_optgroup

54
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>

55
 HTML5
XHTML-old code

<!DOCTYPE html>
<!DOCTYPE html> XP
https://www.w3school
s.com/tags/tag_datali
<html> <html> st.asp
<body> <body>

<input type= " text " list="browsers"

<select name="browser" id="browser">
name="browserstype”
<option value=" Internet Explorer "> id="browserstype">
Internet Explorer </option>
<datalist id="browsers">
<option value=" Firefox "> Firefox
</option> <option value="Internet Explorer">
<option value="Firefox">
<option value=" Opera"> Chrome
</option> <option value="Chrome">
<option value=" Opera"> Opera </option> <option value="Opera">
<option value=" Safari "> Safari </option> <option value="Safari">
</select> </datalist>
</body>
</body> </html>
</html>
XP

57
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” />

Chapter 2 Developing a Web SIte 58

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
/>

59
 XP

https://
www.w3schools.com/tags/tryit.asp?filename=tryhtml5_i 60
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

Chapter 2 Developing a Web SIte 61

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

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_checkbox 62
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

63
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
(height)
– cols attribute specifies the number of characters per line (width)

64
 Creating a Text Area Box (continued 2)XP
• https://www.w3schools.com/code/tryit.asp?
filename=GOWCP7Z0BTZO

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea

https://www.w3schools.com/code/tryit.asp?filename=GOWCP7Z0BTZO 65
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

66
 XP

https://www.w3schools.com/code/tryit.asp?filen
ame=GKZ2ZG2UQLBF

67
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

68
 XP

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range

https://www.w3schools.com/code/tryit.asp?filen
ame=GKZ2ZG2UQLBF 69
Working with Form Buttons XP

• Form buttons: A type of form control/ form

element 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

70
 XP

rb_formsubmit.js

window.onload = setForm;
Click
function setForm() { the
button
document.forms[0].onsubmit = function() {
if (this.checkValidity()) alert("No invalid data detected. Will retain data for further testing.");
return false;
}
}

– Run a command from a program

linked to the web form

71
 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

<input type="button" onclick="alert('Hello World!')"

value="Click Me!">
https://
www.w3schools.com/html/tryit.as
p?filename=tryhtml_input_button
72
Creating Submit and Reset ButtonsXP
• 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

https://www.w3schools.com/tags/tr
yit.asp?filename=tryhtml5_input_ty
pe_reset

73
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
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_reset

https://www.w3sch
ools.com/code/tryit.
asp?filename=GKZ3
G4962VXM

74
XP

75
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

<button type="submit" value="Submit">Submit</button>

<button type="reset" value="Reset">Reset</button>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_type

76
<input type="button" value="click me" onclick="alert('Hello
World!')" /> XP
<input type="submit" value="Submit Form“/>
<input type="reset" value="Cancel“/>

<button name="Back" onClick="location.href='selectionlist.html'">

<img src="home_blink.gif" width="50" height="50" style="margin:
5">
<span style="font: italic bold 16pt; color: blue">Home
Page</span>
</button>

<button type="submit" value="Submit">Submit</button>

<button type="reset" value="Reset">Reset</button>

https://
FORM with table layout
www.w3schools.com/tags/tryit.asp?filen
ame=tryhtml_button_type 77
https://
XP
www.w3schools.com/code/tryit.asp?filename=G
L3O3D8S0VZZ

78
<html>
<body> XP

<h1>The button type attribute</h1>

<form action="/action_page.php" method="get">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit"><a
href="https://www.tarc.edu.my/" style="text-decoration:none;
color:black;"> Submit </a></button>
<button type="reset" value="Reset" >Reset</button>
</form>

</body>
</html>
79
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

80
 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

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required 81
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
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Chapter 2 Developing a Web SIte 82

 XP

– 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
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_url
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email
83
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

84
Testing for a Valid Pattern (continued)XP
• Example: The value of the custZip field against the
regular expression pattern ^\d{5}$
Zip code :<input name="custZip" pattern="^\d{5}$" />
where regular expression ^\d{5}$ represents any
string of five numeric characters

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern2
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_tel
https://www.w3schools.com/tags/att_input_pattern.asp

85
XP

86
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
• https://
www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_maxlength

87
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

88
Applying Inline Validation (continued 1)XP

89
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

90
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);
}

91
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);
}

92
 https://www.w3sc https://www.w3schools.co
hools.com/cssref/
Valid Data css3_pr_backgrou
nd-size.asp
m/cssref/css3_pr_backgr
ound.asp XP

contain Resize the background

image to make sure the
image is fully visible

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

93
 Open rb_forms.css and rb_survey.html
Invalid Data from form tutorial folder XP

94
• The size of the background image is equal to the size stored in the
image file. To specify a different size, apply the following background-
size property:
XP
background-size: width height; https://www.w3schools.com/cssref/t
ryit.asp?filename=trycss3_backgrou
background-size: 200px; 300px nd-size
background-size: auto 200px;
• CSS also supports the sizing keywords auto, cover, and contain

The auto
keyword
tells the
browser to
automatically
set the width
or height
value based
on the
dimensions
of the original
image. (The
background
image is
displayed in
its original
size. 95
 XP

rb_formsubmit.js

window.onload = setForm;
Click
function setForm() { the
document.forms[0].onsubmit = function() { button
if (this.checkValidity()) alert("No invalid data detected. Will retain data for further testing.");
return false;
}
}

– Run a command from a program

linked to the web form

96