html 5 material

1

Pragati Software Pvt. Ltd., 312, Lok Center, Marol-Maroshi Road, Marol, Andheri (East), Mumbai 400 059. www.pragatisoftware.com 1

11

HTML 5

Pragati Software Pvt. Ltd.

www.pragatisoftware.com

2


2

Index

• Overview Introduction to HTML5

Canvas & SVG

Video & Audio

Web Storage (Session & Local)

Web SQL Database

IndexDB

Application Cache

Web Worker

New Input Type

2

3


What is HTML?

• Since its inception HTML has been the predominant language of the World Wide Web

• HTML is how two computers speak to each other over the internet.

• Web sites are what they say.

• HTML is "spoken" by two computers: Client The client is used by the person surfing the net.

Server A server stores and distributes websites over the net.

3

The first web browser, Mosaic, was introduced in 1993. A year later Netscape, based on Mosaic, was introduced and the net began to become popular. HTMLwas used in both browsers, but there was no "standard" HTML until the introduction of HTML 2.0.

HTML 2.0 was first published in 1995.* HTML 3.0 was published two years later and 4.01 two years after that. HTML 4.01 has been the work horse of the net ever since.

4

The first "working draft" of HTML5 came out in January of 2008

It’s important to mention that HTML5 is still undergoing developments and changes.

Two groups, the W3C and the WHATWG, are in charge of developing HTML5


44

HTML 5

• HTML 5 is a new standard for HTML in a draft mode

• First released in Jan 2009

5


Some rule for HTML 5

• Reduce the need for external plugins (like Flash, Silverlight)

• More markup to replace scripting

• HTMS 5 should be device independent

5

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

6


How to use HTML 5• <!DOCTYPE> is an instruction to the web browser about

what version of HTML, the page is written in.

• The <!DOCTYPE> declaration must be the very first line in your HTML document, before the <html> tag

• Demo

6

<!DOCTYPE html><html>

<head><title>Title of the document</title>

</head><body>

The content of the document......</body>

</html>

7


Browser Support for HTML 5

• HTML5 is not yet an official standard, and no browsers have full HTML5 support.

• But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

7

HTML 5 is currently a working draft at the W3C. Because it has not yet been approved as a formal specification, many web browser manufacturers either don’t support HTML 5 or only support some of the tags.

According to Deep Blue Sky and their tests of browsers that visit their site, Safari 4 has the widest support, missing only geolocation API support. Chrome has good support of HTML 5, except for geolocation API. This isn’t surprising as it’s based off of Webkit like Safari. Firefox 3.5 supports the audio tag, video tag, canvas, and even the geolocation API. Opera 10 only really supports the canvas tag reliably, but it doesn’t support audio or video. However it does have good support for web forms 2 and SVG support. And of course, Internet Explorer 8 doesn’t support HTML 5 at all.

Source : http://webdesign.about.com/od/html5/qt/html-5-information.htm

8


HTML 5 New Features

• The <canvas> element for 2D drawing

• The <video> and <audio> elements for media playback Support for local storage

• New form controls, like calendar, date, time, email, url, search

8

9


Canvas• Use for drawing graphics using scripting

• It is a container for graphics

• Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

• Create a canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

• Any content between the <canvas></canvas> tags is "fallback content"- meaning, it will be displayed only if the canvas cannot be displayed.

• Drawing will be done inside JavaScript

9

Every canvas element starts out blank, so it will not appear on the page until something is drawn on it or if it’s styled via CSS (e.g. giving it a border or giving it a background color).

Each canvas element appears in the DOM

You can erase everything that is drawn on the canvas by resetting the width and/or height of the canvas element

The getContext() method “returns an object that exposes an API for drawing” (definition straight from the spec)

There are currently two kinds of contexts available: 2d and webgl (2d is currently the more commonly used context)

The canvas element is “resolution-dependent,” which means (unlike SVG) it will not always scale cleanly after rendering

The default color for any shape drawn is black

Canvas-drawn objects are given colors using RGBA or Hex values

10


Canvas Demo

<script type="text/javascript">

//Get reference of canvas element

var c=document.getElementById("myCanvas");

//Create a context object

//the getContext("2d") object is a built in HTML5 object, with methods to draw rectangle, circle, line etc.

var ctx=c.getContext("2d");

//draw a rectangle with red color

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

//Coordinates : Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

10

11


Canvas Gradient

• Gradient is use for fillStyle and strokeStyle properties

• Two types of gradient context.createLinearGradient(x0, y0, x1, y1)

Returns a CanvasGradient object that represents a linear gradient that paints along the start point (x0, y0) and end point (x1, y1) of the gradient

context.createRadialGradient(x0, y0, r0, x1, y1, r1)

Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the start circle with origin (x0, y0) and radius r0, and the end circle with origin (x1, y1) and radius r1.

11

12


SVG

• SVG stands for Scalable Vector Graphics

• SVG is used to define vector-based graphics for the Web

• SVG defines the graphics in XML format

• SVG graphics do NOT lose any quality if they are zoomed or resized

• Every element and every attribute in SVG files can be animated

• SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

• SVG is a W3C recommendation

12

13


Embedding SVG in HTML5

• HTML5 allows embeding SVG directly using <svg>...</svg> tag

13

<svg xmlns="http://www.w3.org/2000/svg">...

</svg>

14


Canvas vs. SVG

Canvas SVG

Draw 2d graphics with a JavaScript Describe 2d graphics in XML

Resolution dependent Resolution independent

Best suited for graphic intensive games Best suited for application with large rendering areas (Chart, Google map)

14

15


Video & Audio Tags

• No need for third party plug-in like Flash, Silverlight, Quick Time

• This is because these tags are embedded directly into the webpage.

• Development time : save you plenty of development time

• Hardware acceleration : use significantly less CPU power than it would in another browser

• Plug-in free : You don’t have to worry about users downloading the right plugin.

• Browser Support

• Chrome, Firefox, IE9

15

16


Markup for Video

<video width="320"

src="intro.mp4"

height="240"

poster="intro.jpg"

autoplay

controls

loop

autobuffer

>

This content appears if the video tag or the codec is not supported.

</video>

16

• width – sets the width of the video element in pixels. If the width is omitted, the browser will use the default width of the video, if it’s available.

• height – sets the height of the video element. If the height is omitted, the browser will use the default height of the video, if it’s available.

• src – sets the video file to be played. For reach, you should supply video formats that are supported by the most popular browsers.

• poster – sets the image file that will be displayed while the video content is being loaded, or until the user plays the video. If a poster file is omitted, the browser will show the first frame of the video.

• autoplay – instructs the browser to automatically play the video when the page is loaded.

• controls – displays the video controls to control the video playback. The controls are visible when the user hovers over a video. It’s also possible to tab through the controls.

• loop – instructs the browser to loop the media playback.

• autobuffer – used when autoplay is not used. The video is downloaded in the background, so when the user does decide to watch the video, it starts immediately.

17


Video Fallback

• If the browser doesn’t support the video you’re trying to play, To work around this issue you simply add multiple video sources.

<video width="320" height="240" poster="intro.jpg" > This content appears if the video tag or the codec is not supported. <source src="intro.mp4" type="video/mp4" />

<source src="intro.webm" type="video/webm" />

<source src="intro.ogv" type="video/ogg" />

</video>

• By adding multiple sources, the browser will work its way through the list from top to bottom until it finds a video source it can play

17

Chrome support webm

18


Video + DOM

• <video> element supports Methods, properties and events

• If you’re controlling these tags in JavaScript, this rendering can be offloaded to the CPU which helps in the responsiveness of the website

• The video element supports play and pause, volume methods, which gives you the ability to programmatically control the video.

18

19


Audio Support

• A standard way to embed an audio file on a web page

<audio src=“demo.mp3"

preload="auto"

controls

autoplay

loop

autobuffer

muted

>

This content appears if the audio tag or the codec is not supported.

</audio>

19

src – sets the audio file to be played. For reach, you should supply audio formats that are supported by the most popular browsers

preload – none / metadata / auto – where metadata means preload just the metadata and auto leaves the browser to decide whether to preload the whole file

controls – displays the video controls to control the video playback. The controls are visible when the user hovers over a video. It’s also possible to tab through the controls

autoplay – instructs the browser to automatically play the video when the page is loaded

loop – instructs the browser to loop the media playback.

autobuffer – used when autoplay is not used. The video is downloaded in the background, so when the user does decide to watch the video, it starts immediately.

muted – sets the default audio output.

20


Geolocation

• Location specific information

• The HTML5 Geolocation API is used to get the geographical position of a user.

• Since this can compromise user privacy, the position is not available unless the user approves it.

• Browser needs GPS support

20

21


Web Storage• Web Storage allows writing information at client side

• data can be written at client side as key value pair

• Web Storage size varies from 2 MB to 10 MB. Usual size is often 5 MB

• Web Storage offers much more capacity than cookies

• Like cookie, web Storage data does not go to server with every http request

• Web Storage is of two types Local : This store data for the site

Session: This store data for the session.

• Data stored for Local Web Storage stores data in client hard disk.

Session Web Storage stores data in HTTP Session. (temporary in nature and persisted only for a particular HTTP session. This data is deleted when user close the browser window. )

21

Web Storage and Cookies1.Web Storage size is much more than cookies. Maximum size of cookies can be 4Kb whereas size of Web Storage can be up to 10 MB.2.Web Storage data is pure client side data and unlike cached data does not travel to and fro to the sever with each request.3.Web Storage data need to be deleted programmatically.4.Unlike cookies, if the Web Storage data needs to be sending to server, it should be sent programmatically.

Different Web Storage API is as below,1.Clear : removes all key/value pair2.getItem : retrieve given item for a key3.Key : retrieve given value of key4.Length : returns total number of key value pair in storage5.removeItem : remove an item for given key6.setItem : stores key value pair7.remainingSpace : remaining space in bytes.

22


Example for SessionStorage

• designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.

• For example, a user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.

• Usage of sessionstorage like when running two instances of a Scrabble game or running multiple unit tests simultaneously, you don’t want data to collide

22

Take example from this web site

23


Example for LocalStorage

• designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

23

nowadays countless websites (for example Google, Facebook, Amazon, New York Times) rely on HTTP cookie to store data such as user preference, login information, shopping cart and so on. If you disable cookie in your browser and try to access many extremely popular web applications (like Facebook, Twitter, Gmail, Amazon and so on) today, you probably error message

Size and count limitMost browsers limited cookie size to 4096 bytes and 300 maximum cookie count within a domain. IETF recommended limitation standard, refer: http://www.ietf.org/rfc/rfc2109.txt section 6.3.

Performance hitIf a website uses cookie, then every HTTP request/response between server / browser must include all cookie key / values pairs in the HTTP header.

SecurityCookie is stored in user's local hard disk in plaint text. If developers didn't deal with this appropriately,cookie/session hijacking could possibly happen.

Ability to store data separately for more than one instance of same web applicationCookie is not easy to handle one use case: separate instances of the same web application to run in different windows without interfering with each other (sessionStorage is going to well-support that, I will describe it later in this post)

24


Web SQL Database

• The Web SQL Database API isn't actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

• Web SQL Database will work in latest version of Safari, Chrome and Opera.

• Browser internally use SQLite database Browser

24

SQLite Database browser is a light GUI editor for SQLite databases, built on top of Qt. The main goal of the project is to allow non-technical users to create, modify and edit SQLitedatabases using a set of wizards and a spreadsheet-like interface.

For detail refer to http://sqlitebrowser.sourceforge.net/

25


Three Core methods

• openDatabase: This method creates the database object either using existing database or creating new one.

• transaction: This method give us the ability to control a transaction and performing either commit or rollback based on the situation.

• executeSql: This method is used to execute actual SQL query.

25

26


Opening Database

• The openDatabase method takes care of opening a database if it already exists, this method will create it if it does not exist.

• To create and open a database, use the following code:

• var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

• Above method took following five paramters: Database name

Version number

Text description

Size of database

26

27


Executing queries

• To execute a query you use the database.transaction()function.

• This function needs a single argument, which is a function that takes care of actually executing the query as follows:

• var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATETABLE IF NOT EXISTS LOGS (id unique, log)'); });

• The above query will create a table called LOGS in 'mydb' database.

27

28


INSERT Operation

• Add simple SQL query var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, “user1")');

tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, “user2 ")'); });

• pass dynamic values while creating enteries db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT

EXISTS LOGS (id unique, log)');

tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; });

• e_id and e_log are external variables, and executeSql maps each item in the array argument to the "?"s.

28

29


IndexDB API

• A key feature of HTML5 is local data persistence.

• Which enables web applications to be accessible whether online or offline

• HTML5 offers a few options for local data persistence The first option is localstorage, which lets you store data using a

simple key-value pair

IndexedDB, a more powerful option, lets you locally store large numbers of objects and retrieve data using robust data access mechanisms

• Why IndexDB? On November 18, 2010, the W3C announced that Web SQL database

is a deprecated specification.

29

The Indexed Database (IndexedDB) API, part of HTML5, is useful for creating rich, data-intensive, offline HTML5 web applications that need to locally store data. It's also useful for locally caching data to make traditional online web applications such as mobile web applications faster and more responsive.

IndexedDB is an Object Store. It is not the same as a Relational Database, which has tables, with collections rows and columns. It is an important and fundamental difference and affects the way that you design and build your applications.

In a traditional relational data store we would have a table of "todo" items that store a collection of the users todo data in rows. With columns of named types of data. To insert data, the semantics normally follow: INSERT INTO Todo(id, data, update_time) VALUES (1, "Test", "01/01/2010");

IndexedDB differs in that you create an Object Store for a type of data and simply persist Javascript Objects to that store. Each Object Store can have a collection of Indexes that make it efficient to query and iterate across.

IndexedDB also does away with the notion of a Standard Query Language ( SQL), instead it is replaced with a query against an index which produces a cursor that you use to iterate across the result set

30


Steps

• Opening the Database

• Creating an Object Store

• Adding data to an object store

• Querying the data in a store

• Rendering data from an object store

• Deleting data from a table

30

31


Application Cache

• In many areas web application doing the same job as desktop application like Goggle Doc, maintaining to do list on net, picasa etc.

• Three advantages Offline browsing – When user are offline they can browse the

application

Speed – cached resource load faster

Reduce server load – the browser will only download updated resource from the server.

• Browser Support

• Application cache is supported in all major browsers, except Internet Explorer.

31

32


Cache Manifest Basics

• To enable application cache, include the manifest attribute in the document's <html> tag:

• Every page with the manifest attribute specified will be cached when the user visits it.

• If the manifest attribute is not specified, the page will not becached (unless the page is specified directly in the manifest file).

32

<!DOCTYPE HTML><html manifest="demo.manifest">...</html>

33


Manifest File

• This file reside on server

• Helps to specify which files you want to store in AppCache.

• Name can be anything, extension is .manifest

33

34


Three Section Of Manifest File

• CACHE (default)a list of explicit URLs to request and store

• FALLBACKWhat to do when an offline user attempts to access an

uncached file

• NETWORKWhich resources are available only while online and which

are never going to be cahced

• # is used as comment symbol

34

35


Explicitly defining the files to be cached

• Define CACHE: section header to explicitly declare which files need to be cached. For example

CACHE: style.cssscript.jsindex.htm

• The path mentioned for the files should be relative to the location of the manifest file

• The files one specified in CACHE will be loaded from APPCache and not from the server

35

36


Update the cache

• Once you cached the page in AppCache its always get loaded from the cache only until one of the following happens The user clear the browser cache

The manifest file is modified

The application cache is programmatically updated

• The simplest ways is change the version number which is as comment which trigger an update.

36

CACHE MANIFEST

# Version 9

CACHE:/css/screen.cssA version comment in a manifest file

37


Web Workers

• It’s a API specification that allows you to create background JavaScript thread

• Web workers are supported in all major browsers, except Internet Explorer.

37

A web worker is JavaScript running in the background, without affecting the performance of the page.

Web Workers allowing you create multiple JavaScript threads that will run independent of each other

38


Check the support

• Check your browser support HTML5 web worker

38

/* Check if Web Workers are supported */function getWebWorkerSupport() {

return (typeof(Worker) !== "undefined") ? true:false; }

39


Creating a simple worker

• Once we have checked that Workers are supported in the browser we are ready to put them to task.

• In this example we will create a simple Web Worker that will ‘Add’ or ‘Multiply’ two numbers.

39

40


Terminating Web Worker

• Once Worker thread start, the thread doesn’t terminate by itself.

• creating each new Worker consumes precious browser resources, which you will need to reclaim once the Workers task is no longer required by calling terminate() method

40

41


Web worker and the DOM

• Since web workers are in external files, they do not have access to the following JavaScript objects: The window object

The document object

The parent object

41

42


Server-Sent Events

• Send server data to client browser

• Client get automatic update from the server

• Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

•

42

The events which are flowing from web browser to the web server may be called client-sent events.

The events which flow from web server to the web browsers are called Server-Sent Events (SSE).

Using SSE you can push DOM events continuously from your web server to the visitor's browser.

To use Server-Sent Events in a web application, you would need to add an <eventsource> element to the document.

The src attribute of <eventsource> element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events.

43


Demo Client Side

• The EventSource object is used to receive server-sent event notifications:

• Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php")

• Each time an update is received, the onmessage event occurs

• When an onmessage event occurs, put the received data into the element with id="result"

43

var source=new EventSource("demo_sse.asp");source.onmessage=function(event)

{document.getElementById("result").innerHTML+=event.data +

"<br />";};

A server side script should send Content-type header specifying the type text/event-stream as follows.

After setting Content-Type, server side script would send an Event: tag followed by event name. Following example would send Server-Time as event name terminated by a new line character.

Final step is to send event data using Data: tag which would be followed by integer of string value terminated by a new line character as follows:

44


Demo Server Side

• Set the "Content-Type" header to "text/event-stream"

• Specify that the page should not cache

• Output the data to send (Always start with "data: ")

• Flush the output data back to the web page

44

<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>

45


New Input Types

• Better input controls and validation color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

45

46


Color

• The color type is used for input fields that should contain a color.

• Supported by opera browser only

• Select a color from the color picker

46

Select your favorite color: <input type="color" name="favcolor" />

47


Date

• The date type allows the user to select a date.

• Supported by chrome, safari & opera

47

Birthday: <input type="date" name="bday" />

48


DateTime

• allows the user to select a date and time (with time zone).


48

Birthday (date and time): <input type="datetime" name="bdaytime" />

49


datetime-local

• allows the user to select a date and time (no time zone).


49

Birthday (date and time): <input type="datetime-local" name="bdaytime" /> />

50


email

• used for input fields that should contain an e-mail address

• Supported by Firefox, chrome, safari & opera

• automatically validated when submitted

50

E-mail: <input type="email" name="usremail" />

51


month

• allows the user to select a month and year.


51

Birthday (month and year): <input type="month" name="bdaymonth" />

52


number

• used for input fields that should contain a numeric value.

• set restrictions on what numbers are accepted


• attributes to specify restrictions max - specifies the maximum value allowed

min - specifies the minimum value allowed

step - specifies the legal number intervals

value - Specifies the default value

52

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />

53


range

• used for input fields that should contain a value from a range of numbers.

• Can set restrictions on what numbers are accepted.

• attributes to specify restrictions max - specifies the maximum value allowed

min - specifies the minimum value allowed

step - specifies the legal number intervals

value - Specifies the default value

53

<input type="range" name="points" min="1" max="10" />

54


search

• used for search fields

• Supported by chrome, & safari

54

Search Google: <input type="search" name="googlesearch" />

55


time

• allows the user to select a time.


55

Select a time: <input type="time" name="usr_time" />

56


url

• is used for input fields that should contain a URL address.

• The value of the url field is automatically validated when the form is submitted.


56

Add your homepage: <input type="url" name="homepage" />

57


week

• allows the user to select a week and year.


57

Select a week: <input type="week" name="week_year" />

58


The Placeholder Attribute

• . This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field.

58

<!DOCTYPE HTML><html><body>

<form action="/cgi-bin/html5.cgi" method="get">Enter email : <input type="email" name="newinput" placeholder="[email protected]"/><input type="submit" value="submit" /></form>

</body></html>

59


The autofocus Attribute• This attribute is supported by latest versions of Mozilla,

Safari and Chrome browsers only.

• at the time of document load, automatically focus one particular form field.

59


<form action="/cgi-bin/html5.cgi" method="get">Enter email : <input type="text" name="newinput" autofocus/><p>Try to submit using Submit button</p><input type="submit" value="submit" /></form>

</body></html>

60


The required Attribute

• Now you do not need to have javascript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which insist to have a value

60


<form action="/cgi-bin/html5.cgi" method="get">Enter email : <input type="text" name="newinput" required/><p>Try to submit using Submit button</p><input type="submit" value="submit" /></form>

</body></html>

61


New Forms Elements

• HTML5 has the following new form elements: <datalist>

<keygen>

<output>

61

62


<datalist> Element• The <datalist> element specifies a list of pre-defined options

for an <input> element.

• The <datalist> element is used to provide an "autocomplete" feature on <input> elements.

• Users will see a drop-down list of pre-defined options as they input data.

• Supported by Firefox & opera

• Example

62

<input list="browsers" /><datalist id="browsers">

<option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">

</datalist>

63


<keygen> Element

• provide a secure way to authenticate users.

• The <keygen> tag specifies a key-pair generator field in a form.

• When the form is submitted, two keys are generated, one private and one public.

• The private key is stored locally, and the public key is sent tothe server. The public key could be used to generate a client certificate to authenticate the user in the future.

• Supported by Firefox, Chrome, Safari & opera

63

64


<keygen> Demo

• Example

• This tag is provided to generate keys and to submit the public keys as part of HTML form. The private key is encrypted and stored in the local key database while the public key is packaged and sent to the server for authentication.

64

<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" />

</form>

65


<output> Element

• The <output> element represents the result of a calculation (like one performed by a script).

• Supported by Firefox, Chrome, Safari & opera

• Example

65

<form onsubmit="return false" oninput="o.value =parseInt(a.value) + parseInt(b.value)">

<input name="a" id="a" type="number" step="any"> +<input name="b" id="b" type="number" step="any"> =<output name="o" for="a b"></output>

</form>

Attributes

For

A space-separated list containing the IDs of the elements whose values went into the calculation.

Form

Associates the <output> element with its formowner. The value must be the ID of a form in the same document. This allows you to place an<output> element outside of the <form> with which it is associated.

Name

The name of the element.

66


Invoicing Caclulator Demo66

<form onsubmit="return false" oninput="amount.value =(hours.valueAsNumber * rate.valueAsNumber) +((hours.valueAsNumber * rate.valueAsNumber) *vat.valueAsNumber)"><legend>Invoice</legend>

<p><label for="hours">Number of hours</label><input type="number" min="0" id="hours" name="hours"></p>

<p><label for="rate">Rate</label><span>£</span><input type="number" min="0" id="rate"name="rate"></p>

<p><label for="vat">VAT</label><input type="number" min="0" id="vat" value="0.20"name="vat"></p>

<p>Total: <strong>£<output name="amount" for="hours rate vat">0</output></strong></p></form>

67


Drag & Drop

• Introduce new attribute - draggable

• ondragstart attribute specify JavaScript function, that specifies what data to be dragged

• The dataTransfer.setData() – set the type and the value of the dragged data

• ondragover event specify where the dragged data can be dropped

• By default data/element cannot be dropped in other element.

• To allow a drop prevent the default behaviour of the element

67

<img draggable="true" />

event.preventDefault()

68


contenteditable attribute

• Use to specifies whether the content of an element is editable or not

68

<p><h1>ContentEditable demo</h1></p><p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

html 5 material

Documents