COMP519 Web Programming
Lecture 9: HTML (HTML5 Elements: Part 3)
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
HTML Elements for the Body Forms
Forms
•
A form is an element that contains form controls, such as
text fields, buttons, checkboxes, range controls, or color pickers
•
Forms allow users to enter data which can then be sent to a web server
for processing
•
A form element has several (optional) attributes, including
•
action: URL to use for form submission
•
method: HTTP method to use for form submission (get or post)
•
enctype: encoding type to use for form submission
•
novalidate: form is not validated during submission
< form ac ti on =" htt ps :// sam . csc . liv . ac . uk / COMP / C alendar . pl "
me th od =" post " enctype =" text / plain ">
</form >
•
A form can be submitted and on submission the data entered via the
form controls will be send to the URL in action using the HTTP
request method in method with encoding type enctype
COMP519 Web Programming Lecture 9 Slide L9 – 2
HTML Elements for the Body Forms
Forms
•
A form is an element that contains form controls, such as
text fields, buttons, checkboxes, range controls, or color pickers
•
HTML5 introduced a number of additional form controls and attributes
for all form controls, but browser support is partial
; Always test your forms with a range of browsers
(Apple Safari, Google Chrome, Mozilla Firefox, MS IE, MS Edge)
COMP519 Web Programming Lecture 9 Slide L9 – 3
HTML Elements for the Body Forms
Label
•
In order for a form to be usable, each form control should be
accompanied by an indication of what it is for or how it should be used
Example: ‘Surname’ or ‘Enter your surname’ next to a field into which
you are meant to enter your surname
•
A label element represents such an indication (a caption)
•
A label element can be associated with a specific form control either
using its for attribute or by putting the form control inside the label
element itself
< la bel for =" s1 " > S urname : </ label >
< in put name =" su rname " id =" s1 " type =" text ">
<label > First name ( s ): < in put name =" f irst " id =" f1 " type =" text " > </ label >
COMP519 Web Programming Lecture 9 Slide L9 – 4
HTML Elements for the Body Form Controls
Input
•
The input element represents a ‘field’ that allows the user to enter
data of a certain type
•
The type attribute of an input element determine what type of data
can be entered and in what form
Value of Data Form
type type control
text Text with no line breaks Text field
tel Phone number Text field
date Date (Year/Month/Day) Date control
email E-mail address Text field
file Zero or more files Button and file selector
color sRGB color Button and color picker
number Floating-point number Text field or spinner
password Password Text field with obscured input
COMP519 Web Programming Lecture 9 Slide L9 – 5
HTML Elements for the Body Form Controls
Input
•
The input element represents a ‘field’ that allows the user to enter
data of a certain type
•
The type attribute of an input element determine what type of data
can be entered and in what form
Value of Data Form
type type control
checkbox A set of zero or more values
from a predefined list
Checkbox
radio An enumerated value Radio button
button Button
submit Initiates form submission Button
reset Resets form Button
•
Depending on the value of the type attribute, an input element will
have additional attributes that define its behaviour
COMP519 Web Programming Lecture 9 Slide L9 – 6
HTML Elements for the Body Form Controls
Input
•
The input element represents a ‘field’ that allows the user to enter
data of a certain type
•
Depending on the value of the type attribute, an input element will
have additional attributes that define its behaviour
•
Common attributes include
•
id: unique id used to identify the element with the document
•
name: (unique) name used by the form processor to access input
•
autofocus: automatically focus on this form control when the page
is loaded
•
disabled: whether the form control is disabled
•
required: whether the form control is required to have
a non-empty value for form submission
< in put name =" student id " id =" sid " type =" n um be r "
min ="190 000 000" max = "9 99 999999" >
< in put type =" su bm it " >
COMP519 Web Programming Lecture 9 Slide L9 – 7
HTML Elements for the Body Form Controls
Input
< form ac ti on =" pro ce ss . php">
< la bel for =" s1 " > S urname : </ label >
< in put name =" su rname " id =" s1 " type =" text ">
<label > First name : < input name =" first " id =" f1 " type =" text ">
</ label >
<label > S tuden tID : < in put name =" student id " id =" sid " type =" n um be r "
min ="190 000 000" max ="99999999 9" > </ label >
< in put type =" su bm it " >
</form >
•
On submission, the web browser will construct pairs name=value where
name is the value of the name attribute of one of the form controls and
value is the input by the user for that form control
•
A string composed of those pairs will be send to process.php
Example:
Peters, Amy Lee, and 201612345 are entered into the three fields
; surname=Peters, first=Amy+Lee, and studentid=201612345
are sent to process.php
COMP519 Web Programming Lecture 9 Slide L9 – 8
HTML Elements for the Body Form Controls
Input
< form ac ti on =" pro ce ss . php">
< la bel for =" s1 " > S urname : </ label >
< in put name =" su rname " id =" s1 " type =" text ">
<label > First name : < input name =" first " id =" f1 " type =" text ">
</ label >
<label > S tuden tID : < in put name =" student id " id =" sid " type =" n um be r "
min ="190 000 000" max ="99999999 9" > </ label >
< in put type =" su bm it " >
</form >
•
This form can be submitted by either activating the ‘Submit’ button or
by pressing the return key within one of the three input fields
•
Form submission is possible even with all input fields being empty,
even the one for the StudentID
; we need to add the required attribute to prevent empty inputs
•
The StudentID field accepts floating point numbers between the
specified min and max values
; 1.9e8 is accepted and studentid=1.9e8 send to process.php
COMP519 Web Programming Lecture 9 Slide L9 – 9
HTML Elements for the Body Form Controls
Names versus IDs
<p > Pl ease c om plete the fol lowin g form if you are an u nderg ra d : </ p >
< form id =" formUG " action =" process - c omments . php " >
< in put type =" hi dd en " name =" level " va lue =" UG " >
< la bel for =" c1 " > D escribe your pro bl em : </ label >
< in put type =" text " name =" com me nt " id =" c1 " ma xlength ="250" r equir ed >
<br />< input type =" submit " >
<form >
<p > Pl ease c om plete the fol lowin g form if you are a post gr ad : </ p >
< form id =" formPG " action =" process - c omments . php " >
< in put type =" hi dd en " name =" level " va lue =" PG " >
< la bel for =" c2 " > D escribe your pro bl em : </ label >
< in put type =" text " name =" com me nt " id =" c2 " ma xlength ="250" r equir ed >
<br />< input type =" submit " >
</form >
<p >
Help : < br / >
If you are an undergra dua te student ,
co mplete <a href ="# c1 "> the firs t form </ a >. < br />
If you are a pos tgrad uat e student ,
co mplete <a href ="# c2 "> the second form </a >.
</p >
COMP519 Web Programming Lecture 9 Slide L9 – 10
HTML Elements for the Body Form Controls
Names versus IDs
<p> Please c omplet e the follow i n g for m i f y ou are an u n dergrad : </p>
< form id=" formUG " a c tion =" p roce ss - c o mments. php">
< input typ e =" hidden " n ame =" l e vel" value ="UG">
< label for="c1"> Describ e your p roblem : </lab el >
< input typ e =" text " name =" commen t " id =" c1" maxleng t h ="250 " requ ired >
<br/>< input type =" submit ">
<form >
<p> Please c omplet e the follow i n g for m i f y ou are a p ostgrad : </p>
< form id=" formPG " a c tion =" p roce ss - c o mments. php">
< input typ e =" hidden " n ame =" l e vel" value ="PG">
< label for="c2"> Describ e your p roblem : </lab el >
< input typ e =" text " name =" commen t " id =" c2" maxleng t h ="250 " requ ired >
<br/>< input type =" submit ">
</ form >
<p>
Help :<br / >
If y ou are an u n d ergraduat e stud ent ,
compl e t e < a h ref ="# c1"> the firs t form </a>. <br />
If y ou are a p o s tgradua t e stu d ent ,
compl e t e < a h ref ="# c2"> the secon d form </a>.
</ p >
•
Entering ‘None’ into the first form and activating the submit button
sends level=UG and comment=None to process-comments.php
•
Activating the hyperlink underlying ‘the first form’ focuses input on
the form with id c1
COMP519 Web Programming Lecture 9 Slide L9 – 11
HTML Elements for the Body Form Controls
Names versus IDs
<p> Please c omplet e the follow i n g for m i f y ou are an u n dergrad : </p>
< form id=" formUG " a c tion =" p roce ss - c o mments. php">
< input typ e =" hidden " n ame =" l e vel" value ="UG">
< label for="c1"> Describ e your p roblem : </lab el >
< input typ e =" text " name =" commen t " id =" c1" maxleng t h ="250 " requ ired >
<br/>< input type =" submit ">
<form >
<p> Please c omplet e the follow i n g for m i f y ou are a p ostgrad : </p>
< form id=" formPG " a c tion =" p roce ss - c o mments. php">
< input typ e =" hidden " n ame =" l e vel" value ="PG">
< label for="c2"> Describ e your p roblem : </lab el >
< input typ e =" text " name =" commen t " id =" c2" maxleng t h ="250 " requ ired >
<br/>< input type =" submit ">
</ form >
<p>
Help :<br / >
If y ou are an u n d ergraduat e stud ent ,
compl e t e < a h ref ="# c1"> the firs t form </a>. <br />
If y ou are a p o s tgradua t e stu d ent ,
compl e t e < a h ref ="# c2"> the secon d form </a>.
</ p >
•
Entering ‘None’ into the second form and activating the submit button
sends level=PG and comment=None to process-comments.php
•
Activating the hyperlink underlying ‘the second form’ focuses input on
the form with id c2
; name and id serve different purposes
still, programmers often use the same value for both
unless this is not possible (as in the example above)
COMP519 Web Programming Lecture 9 Slide L9 – 12
HTML Elements for the Body Form Controls
Input: Submit
•
An input element with type submit represents a button that, when
activated, submits the form it is associated with
•
Attributes include
•
value: replaces the default label of the button
•
name: (unique) name used by the form processor to access input
•
formaction: Overwrite the
•
formenctype: corresponding
•
formmethod: attributes of
•
formnovalidate: the form
< in put type =" su bm it " >
< in put type =" su bm it " name =" action " value =" Su bm it essay " >
< in put type =" su bm it " f ormac tion =" save . php " >
COMP519 Web Programming Lecture 9 Slide L9 – 13
HTML Elements for the Body Form Controls
Input: Submit (Example 1)
< form action =" p ro cess . php " metho d =" post " >
<label > Name : <input name =" fn" required > </ label >
<label > Es say : < textare a name =" essay " required > </ textarea > </ label >
< input type =" submit " name =" action " value =" Submit essay ">
< input type =" submit " name =" action " value =" Save essay " formno va li da te >
</form >
•
On activating the ‘Submit essay’ button it will be checked that both
Name and Essay have been filled in; if so, the text entered will be send
to process.php together with action=Submit+essay
•
On activating the ‘Save essay’ button no check will take place;
any text entered for Name and Essay will be send to process.php
together with action=Save+essay
•
The script process.php can perform the appropriate operations
depending on the value of action
COMP519 Web Programming Lecture 9 Slide L9 – 14
HTML Elements for the Body Form Controls
Input: Submit (Example 2)
<form >
<label > Name : <input name =" fn" required > </ label >
<label > Es say : < textare a name =" essay " required > </ textarea > </ label >
< input type =" submit " formact io n =" submit . php" valu e =" Submit essay">
< input type =" submit " formact io n =" save . php " value =" Save essay "
fo rm no va li da te >
</form >
•
On activating the ‘Submit essay’ button it will be checked that both
Name and Essay have bene filled in; if so, the text entered will be send
to submit.php
•
On activating the ‘Save essay’ button no check will take place;
any text entered for Name and Essay will be send to save.php
•
The scripts submit.php and save.php have been written specifically
to perform the respective function
COMP519 Web Programming Lecture 9 Slide L9 – 15
HTML Elements for the Body Form Controls
Input: Number
•
An input element with type number represents a one line plain text
field for the element’s value
•
Attributes include
•
value: shown as ‘default’ value in the text field
•
readonly: the value cannot be changed
•
min: minimum value allowed to be entered
•
max: maximum value allowed to be entered
•
step: granularity that is expected (and required) of the value
•
placeholder: a short hint describing the expected value of a text area
(disappears as soon as the user enters a value)
<!- - The only a ll ow ed va lues below are 10 , 12 , 14 -- >
< input type =" number " name =" quant it y " min ="10" max ="14" step ="2" r equired >
<!- - The only a ll ow ed va lues below are 0.0 to 1.0 in steps of 0.1 -- >
< input type =" number " name =" fract io n " min ="0" max ="1" step =" 0.1" r equired >
< input type =" number " name =" age" p la ceholde r =" Ente r your age ">
< input type =" number " name =" s tu de ntid " min ="1 90 00000 0" max =" 99 99 99999" >
COMP519 Web Programming Lecture 9 Slide L9 – 16
HTML Elements for the Body Form Controls
Input: Text
•
An input element with type text represents a one line plain text field
for the element’s value
•
Attributes include
•
value: shown as ‘default’ value in the text field
•
readonly: the value cannot be changed
•
size: visible width of the field in characters
•
minlength: minimum number of characters allowed to be entered
•
maxlength: maximum number of characters allowed to be entered
•
placeholder: a short hint describing the expected value of a text area
(disappears as soon as the user enters a value)
•
pattern: a regular expression that the value has to match
< in put type =" text " name =" su rn ame " size ="100" required >
< in put type =" text " name =" depar tm ent " value =" Co mputer Sc ie nc e " readonly >
< in put type =" text " name =" st udent id " min length ="9" m axlengt h ="9" >
COMP519 Web Programming Lecture 9 Slide L9 – 17
HTML Elements for the Body Form Controls
Input: Password
•
An input element with type password represents a one line plain text
field for the element’s value
•
Same as an input element with type text, except that thw web
browser should should obscure the value that is being entered
•
Has the same attributes as input element with type text
COMP519 Web Programming Lecture 9 Slide L9 – 18
HTML Elements for the Body Form Controls
Input: Checkbox
•
An input element with type checkbox represents a two-state control
(checkbox)
•
The return value of a checked checkbox is on,
an unchecked checkbox returns nothing
•
Attributes include
•
value: replaces the ‘default’ return value
•
checked: this element is selected by default
Most of the other attributes, for example, readonly are not available
< form action =" p ro cess . php ">
<p > What fruits do you like ? </ p >
<label > Appl es < input type =" c he ck box " name =" frui t []" v alue =" a " > </ label >
<label > Oranges < input type =" check bo x " name =" frui t []" v alue =" o " > </ label >
<label > Peaches < input type =" check bo x " name =" frui t []" v alue =" p " > </ label >
< input type =" submit " >
</form >
fruit[] is an array storing a subset
of {"a","o","p""} depending on
which checkboxes have been checked
COMP519 Web Programming Lecture 9 Slide L9 – 19
HTML Elements for the Body Form Controls
Input: Radio
•
A set of input elements with type radio represents a radio button
group in which only one form control can be selected/set to true
•
For input elements to belong to the same radio button group
•
they must be associated with the same form and
•
their name-attributes must have the same value
•
Attributes include
•
value: replaces the ‘default’ return value on
•
checked: this element is selected by default
Most of the other attributes, for example, readonly are not available
< form ac ti on =" pro ce ss . php">
<p > Pl ease select your p referre d contact method :<p >
< in put type =" radio " id =" cc1 " name =" contact " value =" email ">
< la bel for =" cc1 "> Email </ label >
< in put type =" radio " id =" cc2 " name =" contact " value =" phone ">
< la bel for =" cc2 "> Phone </ label >
< in put type =" radio " id =" cc3 " name =" contact " value =" mail ">
< la bel for =" cc3 ">Mail </ label >
< in put type =" su bm it " >
</form >
COMP519 Web Programming Lecture 9 Slide L9 – 20
HTML Elements for the Body Form Controls
Input: Radio
•
If no radio button within a group is selected when the associated form is
submitted, then no value for the group is send to the server
; if the user must make a selection,
then set the required attribute for at least one element
•
If a radio button within a group is selected when the associated form is
submitted, but the value-attribute of that input element is not set,
then the default value on will be returned
; make sure that all input-elements within a radio button group
have a non-empty value-attribute
COMP519 Web Programming Lecture 9 Slide L9 – 21
HTML Elements for the Body Form Controls
Input: Radio
< form ac ti on =" pro ce ss . php">
<p > Pl ease select your p referre d contact method :<p >
< in put type =" radio " id =" cc1 " name =" contact " value =" email ">
< la bel for =" cc1 "> Email </ label >
< in put type =" radio " id =" cc2 " name =" contact " value =" phone ">
< la bel for =" cc2 "> Phone </ label >
< in put type =" radio " id =" cc3 " name =" contact " value =" mail ">
< la bel for =" cc3 ">Mail </ label >
< in put type = submit >
</form >
•
No radio button is selected and no selection is required, so if we activate
the submit button right away, no values will be send to process.php
; if we want to pre-select a button, then we should
set the checked attribute for one of the elements
•
If we select the first button and then activate the button, then
contact=email will be send to process.php
COMP519 Web Programming Lecture 9 Slide L9 – 22
HTML Elements for the Body Form Controls
Textarea
•
A textarea element represents a multi-line text input control
•
A textarea element can have several attributes, including
•
id: unique id used to identify the element with the document
•
name: (unique) name used by the form processor to access input
•
cols: the visible width of a text area (number)
•
rows: the visible height of a text areas (number)
•
maxlength: maximum number of characters that can be entered
entering more is not possible
•
placeholder: a short hint describing the expected value of a text area
(disappears as soon as the user enters a value)
•
required: specifies that a text area must be filled out
•
wrap: specifies whether newlines are preserved
("hard" ; yes / "soft" ; no)
< texta re a name =" p roblem1 " id =" p1 " cols ="10 " r ows ="4" maxle ngth ="35"
re quired wrap =" hard "> Des cribe yo ur problem </ text area >
< texta re a name =" p roblem2 " id =" p2 " cols ="10 " r ows ="4" wrap =" soft "
place holde r =" Describ e your prob le m " > </ textarea >
COMP519 Web Programming Lecture 9 Slide L9 – 23
HTML Elements for the Body Form Controls
Select
•
A select element represents a drop-down menu with pre-defined
options between which the user must select
•
The content of a select element consists of a list of option elements
that represent those options
•
A select-element can have several attributes, including
•
id: unique id used to identify the element with the document
•
name: (unique) name used by the form processor to access input
•
multiple: allow multiple options to be selected
•
required: an option must be selected that has a non-empty value
•
disabled: the current selection can not be changed
•
size: number of options to show to the user
•
An option element can have several attributes, including
•
label: the label used in the drop-down menu
•
value: the value returned for the option
•
selected: the option is selected by default
•
disabled: the option is shown but cannot be selected
COMP519 Web Programming Lecture 9 Slide L9 – 24
HTML Elements for the Body Form Controls
Select
•
A select element represents a drop-down menu with pre-defined
options between which the user must select
(often preferred over a radio button group)
•
The content of a select element consists of a list of option elements
that represent those options
< la bel for =" module " > S el ec t a module : </ label >
< select name =" module " >
< option value =" CO MP 517 ">
CO MP517 : Object O riented S oftware D evelo pme nt
</ option >
< option value =" CO MP 518 ">
CO MP518 : Datab ase and I nform ation S ystems
</ option >
< option value =" CO MP 519 ">
CO MP519 : Web Pro gra mm ing
</ option >
</ select >
COMP519 Web Programming Lecture 9 Slide L9 – 25
HTML Elements for the Body Form Controls
Select
< form ac ti on =" pro ce ss . php">
< la bel for =" module " > S el ec t a module : </ label >
< select name =" module " >
< option value =" CO MP 517 ">
CO MP517 : Object O riented S oftware D evelo pme nt
</ option >
< option value =" CO MP 518 ">
CO MP518 : Datab ase and I nform ation S ystems
</ option >
< option value =" CO MP 519 ">
CO MP519 : Web Pro gra mm ing
</ option >
</ select >
< in put type =" su bm it " >
</form >
•
By default, the first option is selected
•
If the selection is not changed and the user activates the submit button,
then module=COMP517 is sent to process.php
•
In general, the value associated with the selected option will be send
COMP519 Web Programming Lecture 9 Slide L9 – 26
HTML Elements for the Body Form Controls
Select
< form ac ti on =" pro ce ss . php">
< la bel for =" module " > S el ec t a module : </ label >
< select name =" module " >
< option value =" CO MP 517 ">
CO MP517 : Object O riented S oftware D evelo pme nt
</ option >
< option value =" CO MP 518 " selected >
CO MP518 : Datab ase and I nform ation S ystems
</ option >
< option value =" CO MP 519 ">
CO MP519 : Web Pro gra mm ing
</ option >
</ select >
< in put type =" su bm it " >
</form >
•
Adding the attribute selected to the second option, makes it the
option that is selected by default
•
If the selection is not changed and the user activates the submit button,
then module=COMP518 is sent to process.php
COMP519 Web Programming Lecture 9 Slide L9 – 27
HTML Elements for the Body Form Controls
Select
< form ac ti on =" pro ce ss . php">
< la bel for =" module " > Your choice : </ label >
< select name =" module " required >
< option value ="" > Select a module </ option >
< option value =" CO MP 517 ">
CO MP517 : Object O riented S oftware D evelo pme nt
</ option >
< option value =" CO MP 518 ">
CO MP518 : Datab ase and I nform ation S ystems
</ option >
< option value =" CO MP 519 ">
CO MP519 : Web Pro gra mm ing
</ option >
</ select >
< in put type =" su bm it " >
</form >
•
That an option with a non-empty value is pre-selected is often not
desirable ; the user does not need to make a conscious choice
•
Adding a default option with empty value and adding the attribute
required to the select element forces the user to make a conscious
choice
COMP519 Web Programming Lecture 9 Slide L9 – 28
Further Reading
Revision and Further Reading
Read
•
Chapter 9: Forms
•
Chapter 19: More CSS Techniques (Styling Forms)
of
J. Niederst Robbins: Learning Web Design: A Beginner’s Guide to
HTML, CSS, JavaScript, and Web Graphics (5th ed).
O’Reilly, 2018.
E-book https://library.liv.ac.uk/record=b5647021
COMP519 Web Programming Lecture 9 Slide L9 – 29
