Web Design and Programming

1
 Chapter 3

Tables and Forms

2
 Content
Tables
Forms
New HTML5 Form Input Types
Page-Structure/Semantic Elements
Media Elements

3
 Tables
Table places information inside the cells
formed by dividing a rectangle into rows and
columns
Most cells contain data; some cells, usually on
the table's top or side, contain headings.
 Tags:
A table is specified as the content of a <table> tag
The row headings are specified as the content of a
<th> tag
Each row of a table is specified as the content of a
<tr> tag
Each data cell of a row is specified as the content of a
<td> tag
<caption>….</caption>[optional]
 allows to give heading to a table.
 Appears with in <table>…</table>
4  Attributes: Align={top, bottom}
 Format
<table>

<caption>table caption</caption>

<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>

…
</table>

5
 Table Basic Formatting
A border attribute in the <table> tag
specifies a border between the cells
If border is set to "border", the browser’s
default width border is used
The border attribute can be set to a number,
which will be the border width
 E.g. border = “4”
Without the border attribute, the table will
have no lines!
 border attribute not supported in HTML5, use CSS

6
 Table Example

<table border = "border">

<caption>Price of Fruit</caption>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>£0.20</td>
</tr>
<tr>
<td>Orange</td>
<td>£0.50</td>
</tr>
</table>
7
 Table Example: both row & column
labels

Empty cell
Column
headings

Row
headings

8
 Table Attributes
align=“alignment” {left, center, right}
bgcolor=“color”
width=“table width” {absolute or relative}
border=“border width”
bordercolor=“color”
cellspacing=“space amount” {in pixels}
 it controls the spacing between adjacent cells
cellpadding=“padding amount” {in pixels}
 It controls the distance between data in a cell
and the boundaries of the cell

9
 Table Attributes(cont’d)
 Table row attributes:
align=“alignment” {left, center, right}
valign=“alignment” {top, middle, bottom}
bgcolor=“color”
height=“height”
 Table data/heading attributes:
align=“alignment”
valign=“alignment”
width=“width”
bgcolor=“color”
 Unless otherwise specified, <tr> and <td>
inherit attributes of <table> whenever it
applies.
10
 Example
<table align=center border=5 cellpadding=10 cellspacing=5
width=250>
<caption >table 1.0</caption>
<tr align=center>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td bgcolor=blue>Cell 1</td> <td
bgcolor=gray>Cell2</td>
</tr >
<tr align=center valign=center bgcolor=#FF0055
height=30>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
</table>
11
 rowspan and colspan
attributes
colspan=“num columns”
set in the <th> or <td>
one row needs to be a certain number of
columns wide
rowspan=“num rows”
set in the <th> or <td>
Allows a cell to take off more than one row

12
 Example

Two levels of column labels

13
 Another Example: multiple-labeled
columns and labeled rows

Empty upper-left corner cell

specified by both rowspan and
colspan attributes

14
 Table Sections
Tables naturally occur in two and sometimes
three parts
Header – <thead>
First section, contains header information such
as column names
Groups the header content in a table
Body – <tbody>
Groups the body content in a table
Table’s primary data
Footer – <tfoot>
Groups the footer content in a table
E.g. for calculation results and footnotes

15
 Example:

header

body

footer

16
 Display: A table with the three sections

17
Exercise: Create the
following table

18
 Forms
A form is the usual way information is
communicated from a browser to a server
Used to gather input from users
Modeled from paper form

19
Paper form XHMTL form
 Forms
 HTML has tags for information gathering
They are called controls or widgets
Example:
 Single-line & multiple-line text collection
 Checkboxes
All such controls are
 Radio buttons
used to gather
 Menus information from the
user
 The values of all of the controls together in a form
are called the form data
 When the Submit button of a form is clicked, the
form’s values are sent to the server

20
 The <form> Tag
 All of the components (widgets) of a form are
defined in the content of a <form> tag
 The only required attribute of <form> is action
specifies the URL of the application that is to be
called when the Submit button is clicked
action =
"http://www.cs.nott.ac.uk/cgi-bin/survey.pl"
if the form has no action, the value is set to the
empty string (“ ”), we will use this for the time being

 The method attribute of <form> specifies one of the

two possible techniques of transferring the form
data to the server, get and post

21
 GET

Data is sent as part of the request URL

Limitation in size of data, most servers limit a
URL to around two thousand characters
GET is best suited for short and non-secure
data
Insecure because the data input appears in the URL

Is the default method

22
 When to use POST

Always use POST if the form data contains

sensitive or personal information.

The post method transmits all form input

information as a data stream immediately after
the requested URL

POST has no size limitations, and can be used

to send large amounts of data.

23
 The <input> Tag

 used to define controls in a form

 several types of controls
{textbox, checkbox, radio, button, …}
 The type attribute of <input> specifies the kind of control
being created
 {text, hidden, submit, reset, button, checkbox, radio, image,…}
 Text Input
 Creates a horizontal box for text input, e.g: name, address, e-mail,
etc.
 Default size is 20 characters; it can be changed with the size
attribute
 If more characters are entered than will fit, the box is scrolled
(shifted) left
 maxlength – max number of characters allowed

<input type = "text" name = "Phone"

size = "12" >
24
 Example:
Display:

• Note that the form itself is not visible.

• Also note that the default width of a text input field is
20 characters.

25
 The <input> Tag

Password
<input type="password"> defines a
password field
Only bullets or asterisks displayed by
browser

The characters in a password field are masked (shown as

26 asterisks or circles).
 The <input> Tag
Checkboxes: To collect multiple choice input
Every checkbox requires a name attribute, which
identifies the button for form processing on the
server
 every one having the same name
Every checkbox requires a value attribute, which
is the widget’s value in the form data when the
checkbox is ‘checked’

A checkbox that is not ‘checked’ contributes no

value to the form data
By default, no checkbox is initially ‘checked’
To initialize a checkbox to ‘checked’, the checked
27 attribute must be set to "checked"
 Example

28
 The <input> Tag

Radio Buttons
Collections of checkboxes in which only one
button can be ‘checked’ at a time
Every time a radio button is pressed, the button
in the group that was previously on is turned off

Every button in a radio button group MUST have

the same name
If no button in a radio button group is selected
the browser often selects the first one

29
 Example

30
 The <select> Tag
[Using checkboxes & radio buttons when the number of choices is large,
the form becomes too long to display.]
 Specified with a <select> tag rather than with the
<input> tag
 Two kinds:
 those that behave like checkboxes and
 those that behave like radio buttons , i.e. only one item
can be selected at a time (the default)
 That behave like checkboxes are specified by including
the multiple attribute, which must be set to
"multiple"
 The name attribute of <select> is required, the
value sent in the form data is the value of this
31
attribute
 The <select> Tag

 The size attribute of <select> can be included

to specify the number of menu items to be
displayed (the default is 1)
If size is set to > 1 or if multiple is specified, the
menu is displayed as a scrolled list

 Each item of a menu is specified with an

<option> tag
whose pure text content (no tags) is the value of
the item
 An <option> tag can include the selected
attribute, which when assigned "selected"
specifies that the item is pre-selected

32
 Example:

Examples\menu1.html

33 after the scroll arrow is clicked

 After modification, with size set to 2

<select name = “groceries” size = “2”>

Examples\menu2.html

34
 The <textarea> Tag
Creates a multiline text area
Usually include the rows and cols
attributes to specify the size of the text
area
 the default text in a <textarea> tag preserves
all the spaces, returns, and other special
characters.

35
 Example

36
Examples\textarea.html
 Action Buttons:Submit & Reset
 Both are created with <input>
<input type = "reset" value = "Reset Form">
<input type = "submit” value = "Submit Form">
 Reset clears all controls to their initial states
 Submit has two actions:
1. Encode the data of the form & send to the server
2. Request that the server execute the server-
resident program specified as the value of the
action attribute of <form>
 The purpose of such a server-resident program is to process
the form data and return some response to the user
 A Submit button is required in every form

37
 Example

<form action = “”>

<p>
<input type = “submit” value = “Submit Form” />
<input type = “reset” value = “Reset Form” />
</p>
</form>

38
 autocomplete Attribute

 The autocomplete attribute can be used on input

types to automatically fill in the user’s information
based on previous input—such as name, address or
e-mail.

 You can enable autocomplete for an entire form or

just for specific elements
 Make autocomplete = "off" for the credit card and
password inputs

 Study other HTML Input Attributes:

https://www.w3schools.com/html/html_form_attributes.
39
asp
40
 New HTML5 Form Input Types
HTML5 new features:
New input element types for:
 colors, dates, times, e-mail addresses, numbers, ranges
of integer values, telephone numbers, URLs, search
queries, months and weeks

Browsers that don’t support these input types

simply render them as standard text input
elements

41
 Self-validation:

•New HTML 5 input types are self validating on the client side
•Avoid JavaScript code needed to validate user input
•Reduce the amount of invalid data submitted and consequently
reducing Internet traffic
42
 Input Type Color

 The <input type="color"> is used for input fields

that should contain a color.
 Depending on browser support, a color picker can
show up in the input field.

43
 Input Type Date

 The <input type="date"> is used for input fields

that should contain a date.
 Depending on browser support, a date picker can
show up in the input field.

44
 Input Type Datetime-local

 The <input type="datetime-local"> specifies a

date and time input field, with no time zone.
 Depending on browser support, a date picker can
show up in the input field.

45
 Input Type Month

 The <input type="month"> allows the user to

select a month and year.
 Depending on browser support, a date picker can
show up in the input field.

46
 Input Type Week

 The <input type="week"> allows the user to

select a week and year.
 Depending on browser support, a date picker can
show up in the input field.

Note: type="week" is not supported in Firefox, or Internet Explorer 11 and

earlier versions.
47
 Input Type Email

 The <input type="email"> is used for input

fields that should contain an e-mail address.
 Depending on browser support, the e-mail address
can be automatically validated when submitted.

48
 Input Type Number
 The <input type="number"> defines
a numeric input field.
 You can also set restrictions on what numbers are
accepted. The following example displays a numeric
input field, where you can enter a value from 1 to 5:

49
 HTML5 <datalist> Element
 The <datalist> element specifies a list of pre-defined
options for an <input> element.
 Users will see a drop-down list of the pre-defined options
as they input data.
 The list attribute of the <input> element, must refer to
the id attribute of the <datalist> element.

Note: The datalist tag is not supported in Safari or IE9 (and earlier).
50
 Input Type Range
 The <input type="range"> defines a control for
entering a number whose exact value is not important
(like a slider control).
 Default range is 0 to 100. However, you can set
restrictions on what numbers are accepted with the
min, max, and step attributes:

51
 Input Type Search

 The <input type="search"> is used for search

fields (a search field behaves like a regular text
field).

52
 Input Type Tel

 The <input type="tel"> is used for input fields

that should contain a telephone number.
 The tel type is currently supported only in Safari 8.

53
 Input Type Time

 The <input type="time"> allows the user to

select a time (no time zone).
 Depending on browser support, a time picker can
show up in the input field.

54
 Input Type Url
 The <input type="url"> is used for input fields that
should contain a URL address.
 Depending on browser support, the url field can be
automatically validated when submitted.
 Some smartphones recognize the url type, and adds
".com" to the keyboard to match url input.

55
Presentation
Tables can be used to align form fields and
their labels so that the presentation of the
form looks more regular.
one possibility is to use:
 one table row per input field
 within a table row
 one column for the labels
 one column for the input fields

The table borders can be set to 0 so that they

are not visible
Other features of tables (rows & columns) can
be adjusted as required
56
Presentation(cont’d)
Cascading Style Sheets (CSS) can be used
to define further presentation related
attributes for input fields
E.g. all text input fields should have font
size of 10 and background color of grey.
will be discussed in the next section.

57
 Example of a Complete
Form

58
59
 Complete form: Display

60 Examples\popcorn.html
 Presentation: Example
<body bgcolor="FF9999" link="white" alink="Blue" vlink="Red">

<table width="80%" align="center" cellpadding="10" bgcolor="#5599FF">

<tr>
<td colspan="5"><h1>DemoSite</h1></td>
</tr>
</table>

<table width="80%" align="center" cellpadding="10" border="1"

bgcolor="maroon">
<tr>
<td align="center"><a href="home.html">Home</a></td>
<td align="center"><a
href="Registration">Registration</a></td>
<td align="center"><a href="product.html">Products</a></td>
<td align="center"><a
href="download.html">Downloads</a></td>
<td align="center"><a href="About.html">About</a></td>
</tr>
</table>

61
Example(cont’d)
<table width="80%" align="center" cellpadding="20" bgcolor="white">
<tr>
<td bgcolor="white">
<h2>Page Heading</h2>
<hr width="80%" align="left" />
<p>Content goes here. Content goes here. Content goes
here. Content goes here. Content goes here. Content goes here. Content
goes here. Content goes here.
Content goes here.</p>

...more content...
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />
<hr />
<center>&copy-XYZ Company</center>
</td>
</tr>
</table>
</body>

62
Example: output

63
 New Semantic Elements in HTML5

 For better document structure

 A semantic element clearly describes its meaning
to both the browser and the developer.
 Non-semantic elements e.g. <div> and <span> -
Tells nothing about its content.
 Semantic elements e.g. <form>, <table>, and
<article> - Clearly defines its content.
 HTML5 offers new semantic elements to define
different parts of a web page
 HTML5 semantic elements are supported in all
modern browsers.

64
 Why semantic Elements?
•Easy for search engines to identify the correct web page content

Study Complete Reference list of semantic elements on:

www.w3schools.com

65
66
 HTML5 <section> Element
 The <section> element defines a section in a
document.
 According to W3C's HTML5 documentation:
"A section is a thematic grouping of content, typically
with a heading."

67
68
 HTML5 <article> Element

 The <article> element specifies independent, self-

contained content.
 An article should make sense on its own, and it should
be possible to read it independently from the rest of the
web site.

 Examples of where an <article> element can be used:

 Forum post
 Blog post
 Newspaper article

69
70
 HTML5 <header> Element

 The <header> element specifies a header for a

document or section.
 The <header> element should be used as a
container for introductory content.
 You can have several <header> elements in one
document.
 The following example defines a header for an
article:

71
72
 HTML5 <footer> Element
 The <footer> element specifies a footer for a document
or section.
 A <footer> element should contain information about
its containing element.
 A footer typically contains the author of the document,
copyright information, links to terms of use, contact
information, etc.
 You may have several <footer> elements in one
document.

73
 HTML5 <footer> Element

74
 HTML5 <nav> Element
 The <nav> element defines a set of navigation links.
 NOT all links of a document should be inside a <nav>
element. The <nav> element is intended only for major
block of navigation links.

75
 HTML5 <aside> Element
 The <aside> element defines some content aside
from the content it is placed in (like a sidebar).
 The aside content should be related to the
surrounding content.

76
 HTML5 <figure> and <figcaption>
Elements
 The purpose of a figure caption is to add a visual
explanation to an image.
 In HTML5, an image and a caption can be grouped
together in a <figure> element:

77
 HTM5 Media and Graphics
Elements
www.w3schools.com

78
 HTM5 Graphics Elements
 HTML5 Canvas
 The HTML <canvas> element is used to draw graphics on a
web page, via JavaScript.
 The <canvas> element is only a container for graphics.
You must use JavaScript to actually draw the graphics.

 Canvas has several methods for drawing paths, boxes,

circles, text, and adding images.
 A canvas is a rectangular area on an HTML page. By
default, a canvas has no border and no content.
 Always specify an id attribute (to be referred to in a script),
and a width and height attribute to define the size of the
canvas. To add a border, use the style attribute.
79
 Canvas Example:

Draw a Line

80
 HTML5 SVG
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation
 The HTML <svg> element is a container for SVG
graphics.
 SVG has several methods for drawing paths, boxes,
circles, text, and graphic images.

81
 SVG Example: Draw Circle

Other Shapes

82
 SVG vs Canvas

• SVG is a language for describing 2D graphics in XML.

• Canvas draws 2D graphics, on the fly (with a JavaScript).
• SVG is XML based, every element is available within the SVG DOM, each
drawn shape is remembered as an object
• If attributes of an SVG object are changed, the browser can automatically re-
render the shape.
• Canvas is rendered pixel by pixel

83
 HTML Google Maps

 Google Maps allows you to display maps on your

web page
 Steps:
Set the size of the map
Create a function to set the map properties
 define map location with latitude & longitude
Add the Google Maps API
 functionality of the map is provided by a JavaScript library located at
Google

84
85
86
 HTML Multimedia:
Sound, Music, Videos, Movies, Animations – with different types and
formats

Common Video Formats: Only MP4, WebM, and Ogg video are supported
by the HTML5 standard!

87
 Audio Formats
Only MP3, WAV, and Ogg audio are supported by the HTML5 standard!

88
 HTML5 Video
 Before HTML5, a video could only be played in a browser with
a plug-in (like flash).
 The HTML5 <video> element specifies a standard way to
embed a video in a web page.

• The controls attribute adds video controls, like play, pause, and volume.
• Include width and height attributes.
• The <source> element allows you to specify alternative video files which the
browser may choose from.
89
 HTML5 Audio
 Before HTML5, audio files could only be played in a browser
with a plug-in (like flash).
 The HTML5 <audio> element specifies a standard way to
embed audio in a web page.
 To play an audio file in HTML, use the <audio> element:

90