Chapter 2- part II

Introduction to HTML5
Structure and Formatting
HTML Forms

 Users want to communicate through web pages, by typing in

information, making selections from drop-down lists, and
interacting, rather than simply reading.
 Inthis chapter, you learn how to build these interactive
elements in your pages.
 Forms are the parts of the page that allow user interaction.
 You
can create forms with ordinary HTML, but to make them do
something, you need a programming language (JavaScript &
PHP(server-side script, to handle the input)).
What is a form?

 Traditionally, the term 'form' has referred to a printed document

that contains spaces for you to fill in information
 Whether you are adding a simple search box to your website or
you need to create more complicated insurance applications.
 HTML forms give you a set of elements to collect data from your
users
Why forms?

 The best known form on the web is probably the search box that
sits right in the middle of Google's homepage

 Youwill see forms when registering as a member of a website,

when shopping online, and when signing up for newsletters or
mailing lists
How Form
works?
HTML Form Example
Form Structure

 HTML5 provides forms for collecting information from users.

 The HTML <form> element defines a form that is used to collect
user input:

 An HTML form contains form elements/controls.

 Form elements are different types of input elements, like text
fields, checkboxes, radio buttons, submit buttons, and more.
<form> element attributes
1. Action attribute:

 Every <form> element requires an action attribute. Its value

is the URL for the page on the server that will receive the
information in the form when it is submitted.

 The action attribute defines the action to be performed when

the form is submitted.
 Normally, the form data is sent to a web page on the server
when the user clicks on the submit button.
 <form> element attributes
2. Method attribute :

 The method attribute specifies the HTTP method (GET or POST)

to be used when submitting the form data.
 With the get method, the values from the form are added to the
end of the URL specified in the action attribute.
 With the post method, the values are sent in what are known as
HTTP headers, so does not display the submitted form data in
the page address field.
 If the method attribute is not used, the form data will be sent
using the get method by default.
More about get method

 when get is used, the submitted form data will be visible in

the page address field:
 Everything after (?) is called query string, and it’s a set of
information in (name=value&name=value) format
 Backend, or server-side script should be able to fetch the
information in the query string and then handle it.
When to use get or post method
 The get method is ideal for:
● short forms (such as search boxes)
● when you are just retrieving data from the web server
(not sending information that should be added to or
deleted from a database)

 As a rule of thumb, you should use the post method if your

form:
● allows users to upload a file
● is very long, post has no size limitation
● contains sensitive data (e.g. passwords)
● adds information to, or deletes information from a
database
Form controls
• There are several types of form controls that you can use to
collect information from visitors to your site
• They all lies in the <form> element.

Text, such as
• Text input (single-line)
• Password
• Text area (multi-line)

Choices, such as
• Radio buttons
• Checkboxes
• Drop-down lists

Buttons
• Submit button
• Clear button
• Reset button
• File upload
Text – single line
<input> tag
• The <input> element is used to
create several different form
controls.
• The value of the type attribute
determines what kind of input
they will be creating.

• type="text“, <input type="text">

When the type attribute has a
value of text, it creates a single
line text input, such as email
addresses and names.

• Name, Therefore, each form

control requires a name
attribute. The value of this
attribute identifies the form
control and is sent along with
the information they enter to the
server.
How the server gets the submitted data
The Name Attribute:
 To differentiate between various pieces of input data, information
is sent from the browser to the server using name/value pairs
 Each input field must have a name attribute to be submitted.
 If the name attribute is omitted, the data of that input field will
not be sent at all.

Notice that the value of the "First name" field will not be submitted, because the input element
does not have a name attribute
Password
<input> tag

• type=“password“, When the type

attribute has a value of password it
creates a text box that acts just
like a single-line text input, except
the characters are blocked out
(Input is hidden with stars or
bullets).

• Although the password is hidden

on the screen, this does not mean
that the data in a password control
is sent securely to the server

• Name, the name attribute indicates

the name of the password input,
which is sent to the server with the
password the user enters.
Textarea-multiple
lines
<textarea> tag

• The <textarea> element is used

to create a mutli-line text input,
such as messages and
comments.

• Unlike other input elements this

is not an empty element. It
should therefore have an opening
and a closing tag.

• Any text that appears between

the opening tags will appear in
the text box when the page loads
 Submit button
<input> tag

• type="submit"
1. The submit button is used to send a
form to the server/form-handler (this
is its default behaviour/action)
• The form-handler is specified in
the form's action attribute
• If action attribute is not defined in
the form tag, then by default the
form handler is your current page.
This explains the refresh behavior
of the page you notice when click
the submit button.

2. Has The value attribute is used to

control the text that appears on the
button.
• if omitted, then Submit button has Note: If you omit the submit button's value
“submit” as default value. attribute, the button will get a default text
 Reset button
<input> tag

• <input type="reset"> defines a

reset button that will reset all
form values to their default
values (does not clear elements)

• Its default value is “Reset” if

value attribute is not provided.
HTML <input type="color">

• HTML <input type="color"> shows a color picker

• The dialog varies depending on the browser. Some browsers
don’t support this input type.
HTML <input type="date">

• The input type="date" is a date control (year, month, day)

with no time zone.
• The example shows the input type="date" field as it is seen in
Google Chrome.
• The input dialog varies from browser to browser.
HTML <input type=“number">

• HTML <input type=“number"> defines a field for entering a number.

• You can optionally specify the minimum, maximum values, step size,
etc.
• The example shows the number selector in the Chrome browser. Only
the numbers between 5 and the 10 are available for selection.
HTML input type="range"

• <input type="range“> takes a numeric range as input.

• The example shows the number selector in the Chrome
browser.
• Only the numbers in the range of the minimum and the
maximum are available for selection.
• The range attribute displays a slider with a range of values
between the minimum and maximum. Only the slider itself
is shown.
HTML <input type=“radio">

• <input type="radio"> defines a

radio button, let you choose ONLY
ONE

• Once a radio button has been

selected it cannot be deselected
(you can only change the option
chosen)

• type="radio" Radio buttons allow

users to pick just one of a number
of options

• The checked attribute can be used

to indicate which value (if any)
should be selected when the page
loads.
Radio buttons
name attribute

• To allow one selection, all radio buttons

should belong to same group, you can
implement this by unify the name attribute
of all radio buttons.

• The name attribute is sent to the server • Note:

with the value of the option the user • If users need to see all
selects. options at a glance, radio
buttons are better suited.
• The name attribute should be the same for
all of the radio buttons used to answer that • If there is a very long list
question/ of options (such as a list
of countries), drop down
• The value attribute indicates the value that list boxes work better.
is sent to the server for the selected
option. The value of each of the buttons in
a group should be different.
HTML <input
type=“checkbox">

• type="checkbox“, Checkboxes allow

users to select (and unselect) one or
more options in answer to a question
(ZERO or MORE).

• The name attribute is sent to the server

with the value of the option(s) the user
selects.
• the value of the name attribute should
be the same for all of the buttons that
answer that question
• As radio buttons, all checkboxes (of
same context) should be grouped by
one name.

• The checked attribute indicates that

this box should be checked when the
page loads. If used, its value should be
checked.
HTML <input
type=“button">

• <button>element was introduced to

allow users more control over how their
buttons appear, and to allow other
elements to appear inside the button.

• This means that you can combine text

and images between <button> and
</button> as the button value

• Anything between the open and close

tag will be clickable. But you have to:
• Define the value, using value
attribute.
• Define behavior, using onclick
attribute (its value is a JS action).

• If omitted, the clickable area will do

nothing.
 File upload
<input> tag

• If you want to allow users to upload a

file, you will need to use a file input
box.

• type="file" This type of input creates a

box that looks like a text input
followed by a browse button. When the
user clicks on the browse button, a
window opens up that allows them to
select a file from their computer to be
uploaded to the website.

• When you are allowing users to upload

files, the method attribute on the
element must have a value of post.
(You cannot send files using the HTTP
get method).
Drop down list
<select> and <option> tags

• A drop-down list box (also known as a select box)

allows users to select one option from a drop-down
list.
• The <Select> element is used to create a drop-down
list box. It contains two or more <option> elements.
• The <option> element is used to specify the options
that the user can select from. The words between the
opening and closing tags will be shown to the user in
the drop-down box.
• The <option> element uses the value attribute to
indicate the value that is sent to the server along with
the name of the control if this option is selected
• The selected attribute can be used to indicate the
option that should be selected when the page loads.
• if this attribute is not used, the first option will be
shown when the page loads by default.
Datalist Options
• A simple “autocomplete” feature can be provided for a text using an
element to enclose a number of pre-defined values. The user may
choose any one of the options or enter text directly into the input
field. In order to associate the field with the list, the tag must include
an id attribute to specify a list name. The same name must then be
specified to a list attribute within the tag to create the association.
You may need to
DoubleClick the
input field to
override your
browser’s own
autocomplete
suggestions.
 Labeling form controls
• <label> element: each form control should have its own <label> element as
this makes the form accessible to vision-impaired users.

• users can click on either the form control or the label to select. The expanded
clickable area makes the form easier to use. The position of the label is very
important. If users do not know where to enter information or what
information to enter, they are less likely to use the form correctly.

• Can be used in two ways:

1. Wrap around both the text description and the form input

2. Be kept separate from the form control and use the for attribute to indicate
which form control it is a label for.
 The for attribute states which form control the label belongs to
 The value of the for attribute matches that of the id attribute on the form control it is
labelling
Grouping form elements

 You can group related form controls together inside the

<fieldset>element. This is particularly helpful for longer forms.
 Most browsers will show the fieldset with a line around the edge
to show how they are related.
 The <legend> element can come directly after the <fieldset>
opening tag and contains a caption which helps identify the purpose
of that group of form controls
Form validation
 Traditionally, form validation has been performed using
JavaScript, But HTML5 is introducing validation and leaving the
work to the browser.
 Validating the contents of the form before it is sent to the
server helps:
● Reduce the amount of work the server has to do
● Enables users to see if there are problems with the form
faster than if validation were performed on the server.
 Using required attribute
Summary
 Whenever you want to collect information from visitors you will need a
form, which lives inside a <form> element
HTML forms submit data to the web server as name=value pairs for
processing by a specified server-side script.
 All form component elements are enclosed between tags, which must
include an action attribute, to specify the URL of the processing script,
and a method attribute to specify the submission method as GET or
POST.
 Each tag’s type attribute specifies its component type, such as “text”,
“password”, “checkbox”, “radio”, etc.
 A tag can enforce its completion by including the required keyword, but
many automatically prohibit submission if the user enters a value that is
not permitted.
Each form control can be enclosed between tags to visually group them
with text for styling purposes by using <fieldset> and <legend>
elements
Exercise -1
• Write HTML code that generates the following form :
Exercise -2
• Write HTML code that generates the following form :
HTML Media Content
 Thischapter demonstrates how to include images and
other media content on web pages.
 Display multimedia content on a web page:
 Image
 Video
 audio
Images
<img> , <figure>
Introduction

 There
are many reasons why you might want to add an image to a
web page:
 You might want to include a logo, photograph, illustration, diagram, or
chart.
 A picture can say a thousand words, and great images help make the
difference between an average-looking site and a really engaging one.

 Images should... be:

 Relevant, convey information, convey the right mood, be instantly
recognizable, and fit the color palette.
 Stock photos are found in :
 www.istockphoto.com
 www.gettyimages.com
 www.fotolia.com
How to choose an image

 Three rules for choosing images:

 The right format: Websites mainly use images in jpeg, gif, or
png format. If you choose the wrong image format then your
image might not look as sharp as it should be and can make
the web page slower to load.

 The right size: If the image is smaller than the width or height
that you have specified, the image can be distorted and
stretched.

 The correct resolution: Resolution refers to the number of dots

per inch, and most computer screens only show web pages at
72 pixels per inch. So saving images at a higher resolution
results in images that are larger than necessary and take longer
to download.
Image different formats
 Themost popular image formats used by web developers today are:
PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts
Group) and GIF (Graphics Interchange Format).
Image different formats

JPEG GIF or PNG

 Use GIF or PNG format when saving images
 Whenever you have many different
with few colors or large areas of the same
colors in a picture you should use a
color.
JPEG.  Logos, illustrations, and diagrams often use
flat colors.
 If having transparent parts use PNG.
 HTML Images - <img>
 HTML images are defined with the <img> tag.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.
 It must carry the following two attributes:
 Src: This tells the browser where it can find the image file. This will usually be a
relative URL pointing to an image on your own site.
 Alt: This provides a text description of the image which describes the image if
you cannot see it.
 If the image is just to make a page look more attractive (and it has no meaning, such
as a graphic dividing line), then the alt attribute should still be used but the quotes
should be left empty.
 The text used in the alt attribute is often referred to as an alternate text. It should give
an accurate description of the image content so it can be understood by screen reader
software.
 Information in alt attribute is also used in image-searching software like Google
Images.
Image Size - Width and Height
 The size of images is increasingly being specified using CSS rather than HTML.

 But, you can use the width and height attributes to specify the image size. Here, the
values are specified in pixels by default:

 Width and height are optional attributes:

 If omitted, the browser uses the image’s actual width and height
 Images are measured in pixels
Figure and caption
 Images often come with captions. HTML5 has introduced a new element to contain
images and their caption so that the two are associated.
 You can have more than one image inside the <figure> element as long as they all

share the same caption

 The <figcaption> element has been added to HTML5 in order to allow web page

authors to add a caption to an image

 Videos
<video>, <source>
HTML5 Video

 Before HTML5, a video could only be played in a browser with a plug-in

(like flash).
 TheHTML5 <video> element specifies a standard way to embed a video in
a web page.

 To show a video in HTML, use the <video> element.

 Toensure most people can play your video content, it is considered best
practice to use the HTML5 <video> element for browsers that support it
 Key issues

 Here are some of the key issues to be aware of:

1) Support: The new HTML5 <video> element is only supported by recent browsers.
2) Format: Not all browsers support the same video formats. Therefore, you need to
supply your video in more than one format.
3) Controls: The browser supplies its own controls for the player, and these can vary
from browser to browser. You can control the appearance of these controls using
JavaScript

There are two main video compression standards:

• Advanced Video Coding (AVC) – a patented standard
that is also known as H.264 or MPEG-4 ( .mp4 files).
• WEBM video – a royalty-free alternative to the patented
H.264 and MPEG-4 standard ( .webm files).
 Adding video - <video>
• <video> element has a number of attributes which allow you to control video
playback:
• Src: This attribute specifies the path to the video
• Controls: When used, this attribute indicates that the browser should supply its own
controls for playback, like play, pause, and volume
• Autoplay: When used, this attribute specifies that the file should play automatically.
• Sometimes you need to use muted with Autoplay.
• May not work on mobile devices.
• Loop: When used, this attribute indicates that the video should start playing again
once it has ended.
• If the browser does not support the element or the format of video used, it will display
whatever is between the opening and closing tags .
Multiple video sources
 <source>: To specify the location of the file to be played, you can use the <source> element
inside the <video> element. (This should replace the src attribute on the opening tag.)

 You can also use multiple <source> elements to specify that the video is available in
different formats.

 Type: You should use this attribute to tell the browser what format the video is.
 Otherwise, it will download some of the video to see if it can play the file (which will take time and
bandwidth)

 If the browser does not support the element or the format of video used, it will display
whatever is between the opening and closing tags.
HTML5 Video
 Audios
<audio> , <source>
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.
 Web supported formats for audio:
 <audio>
Adding audio - <audio>
HTML5 introduced the <audio> element to include audio files
in your pages. As with HTML5 video, browsers expect different formats
for the audio.
 Src: This attribute specifies the path to the audio file
 Controls: This attribute indicates whether the player should display controls.
 Autoplay: The presence of this attribute indicates that the audio should start
playing automatically.
Multiple audio source
 <source> It is possible to specify more than one audio file using the
element between the opening and closing tags.
Embed Objects
<object> ….. </object>
 Embed objects- <object>
 An external resource can be embedded
into an HTML document using
<object> </object> tags to define the
resource.
 When the resource is an image, it will
be treated much like those specified by
<img> element, otherwise a plugin
may be sought to process the resource.
 The <object> element can specify the
resource’s URL to its data attribute, and
the resource type to its type attribute.
The resource type must be a valid MIME
type describing the resource.
Summary

 The <img> element is used to add images to a web page.

 You must always specify a src attribute to indicate the source of an image and an alt
attribute to describe the content of an image.
 You should save images at the size you will be using them on the web page and in the
appropriate format.
 Photographs are best saved as JPEGs; illustrations or logos that use flat colors are
better saved as GIFs
 HTML5 introduces new elements for adding video and audio to web pages, but these are
only supported in the latest browsers.
 Browsers that support the HTML5 elements do not all support the same video and
audio formats, so you need to supply your files in different formats to ensure that
everyone can see/hear them.
 h1

Exercise Image with

height and
width = 300 px

• Write HTML code that

generates the following:
h1
• Make sure to save and
organize multimedia files in
separate directories and use Video with
relative address to refer to height and
their location. width = 400 px
HTML Tables :What is a table
• A table represents information in a
grid format. Examples of tables
include financial reports, TV
schedules, and sports results.

• Grids allow us to understand

complex data by referencing
information on two axes.

• Each block in the grid is referred to

as a table cell. In HTML a table is
written out row by row.

• Tables are frequently used to

organize data into rows and
columns.
HTML Tables - <table>
 When representing information in a table, you need to think
in terms of a grid made up of rows and columns.
 The HTML table is defined with the <table> </table> pair.
 By default (in most browsers, anyway), tables don’t show
their borders. If you want to see basic table borders, you can
turn on the table’s border attribute.
HTML Tables - <tr>

 After you define a table, you need to add some rows. Each
row is indicated by a <tr> </tr> pair.
 The number of <tr> </tr> pairs define the of table rows.
HTML Tables - <td>
 Inside the <tr> </tr> set, you need some table data.
 Each table row can consist of a number of table data <td> or
table header <th> tags.
 Place the data elements inside the <td> </td> segments
and you’re ready to go.
Table headings - <th>
• <th> element is used just like the <td>
element but its purpose is to represent the
heading for either a column or a row.

• These special cells are formatted differently

to indicate that they’re labels, rather than
data. By default, table headers are bold and
centered.

• <th> elements for headings help people

who use screen readers, improves the ability
for search engines to index your pages, and
also enables you to control the appearance
of tables better when you start to use CSS.

• Even if a cell has no content, you should still

use a <td> or <th> element to represent
the presence of an empty cell otherwise the
table will not render correctly.
HTML Tables-Example
Spanning columns
 Sometimes you may need the entries in a table to stretch across
more than one column.
 The colspan attribute can be used on a <th> or <td> element
and indicates how many columns that cell should run across.
Spanning rows
 The rowspan attribute can be used on a <th> or <td>
element to indicate how many rows a cell should span
down the table.
HTML Table -Spanning rows and
columns
 Sometimes, you need a little more flexibility in your table
design.
HTML Table -Adding a Caption
 To add a caption to a table, use the <caption> tag:
HTML Table - Adding a Border
 If you do not specify a border for the table, it will be displayed
without borders.
 A border is set using the border attribute.
 Table border can be also specified using the CSS border
property (as you will see when you learn about CSS).
Using <thead>, <tbody> and <tfoot> to
structure HTML tables
• There are three elements that help distinguish between the
main content of the table and the first and last rows (which
can contain different content).
• These elements help people who use screen readers and
also allow you to style these sections in a different manner
than the rest of the table (as you will see when you learn
about CSS).
• <thead> The headings of the table should sit inside the
<thead> element.
• <tbody> The body should sit inside the <tbody>
element.
• <tfoot> The footer belongs inside the <tfoot> element.
Summary
 The <table> element is used to add tables to a web page.
A table is drawn out row by row. Each row is created with
the <tr> element.
 Insideeach row there are a number of cells represented by
the <td> element ( or the <th> element as a header).
 Youcan make cells of a table span more than one row or
column using the rowspan and colspan attributes.
Exercise
• Write HTML code the generates the following table:

1.77 85
1.6 65