The range type is used for input fields that should contain a value from a range of numbers.

The range type is displayed as a slider bar.

You can also set restrictions on what numbers are accepted:

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

Use the following attributes to specify restrictions for the range type:

Input Type – Date Pickers

HTML5 has several new input types for selecting date and time:

• date – Selects date, month and year
• month – Selects month and year
• week – Selects week and year
• time – Selects time (hour and minute)
• datetime – Selects time, date, month and year (UTC time)
• datetime-local – Selects time, date, month and year (local time)

The following example allows you to select a date from a calendar:

Date: <input type=”date” name=”user_date” />

Input type “month”: Try it yourself

Input type “week”: Try it yourself

Input type “time”: Try it yourself

Input type “datetime”: Try it yourself

Input type “datetime-local”: Try it yourself

Input Type – search

The search type is used for search fields, like a site search, or Google search.

The search field behaves like a regular text field.

Input Type – color

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

The Opera browser will allow you to select a color from a color picker, Google’s Chrome will only allow hexadecimal color values to be submitted:

Color: <input type=”color” name=”user_color” />

HTML5 <input> Tag

HTML5 has several new input types for forms. These new features allow for better input control and validation.

This chapter covers the new input types:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

Browser Support

Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields.

Input Type – email

The email type is used for input fields that should contain an e-mail address.

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

E-mail: <input type=”email” name=”user_email” />

Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it (adds @ and .com options).

Input Type – url

The url type 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.

Homepage: <input type=”url” name=”user_url” />

Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input Type – number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on what numbers are accepted:

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

Use the following attributes to specify restrictions for the number type:

HTML5 offers two new objects for storing data on the client:

• localStorage – stores data with no time limit
• sessionStorage – stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.

The data is stored in different areas for different websites, and a website can only access data stored by itself.

HTML5 uses JavaScript to store and access the data.

The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.

How to create and access a localStorage:

<script type=”text/javascript”>
localStorage.lastname=”Smith”;
document.write(localStorage.lastname);
</script>

The following example counts the number of times a user has visited a page:

<script type=”text/javascript”>
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write(“Visits “+ localStorage.pagecount + ” time(s).”;
</script>

The sessionStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

How to create and access a sessionStorage:

<script type=”text/javascript”>
sessionStorage.lastname=”Smith”;
document.write(sessionStorage.lastname);
</script>

The following example counts the number of times a user has visited a page, in the current session:

<script type=”text/javascript”>
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write(“Visits “+sessionStorage.pagecount+” time(s) this session.”;
</script>

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas’ X and Y coordinates are used to position drawings on the canvas.

More Canvas Examples

Below are more examples of drawing on the canvas element:

 - Line

<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”;
var cxt=c.getContext(“2d”;
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

- Circle

<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”;
var cxt=c.getContext(“2d”;
cxt.fillStyle=”#FF0000″;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

- Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”;
var cxt=c.getContext(“2d”;
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″;
grd.addColorStop(1,”#00FF00″;
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

- Image

<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”;
var cxt=c.getContext(“2d”;
var img=new Image();
img.src=”img_flwr.png”;
cxt.drawImage(img,0,0);

</script>

</body>
</html>

HTML5 <canvas> Tag

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”;
var cxt=c.getContext(“2d”;
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>

JavaScript uses the id to find the canvas element:

var c=document.getElementById(“myCanvas”;

Then, create a context object:

var cxt=c.getContext(“2d”;

The getContext(“2d” object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);

The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.

Audio on the Web

Until now, there has never been a standard for playing audio on a web page.

Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include audio, with the audio element.

The audio element can play sound files, or an audio stream.

To play an audio file in HTML5, this is all you need:

The control attribute is for adding play, pause, and volume controls.

Insert content between the <audio> and </audio> tags for browsers that do not support the audio element:

<audio src=”song.ogg” controls=”controls”>
Your browser does not support the audio element.
</audio>

The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.

To make the audio work in Internet Explorer and Safari, add an audio file of the type MP3.

The audio element allows multiple source elements. Source elements can link to different audio files. The browser will use the first recognized format:

Audio Formats

Currently, there are 3 main formats for the audio element:

Until now, there has never been a standard for showing a video or movie on a web page.

Today, most videos are shown through a plugin (like flash). However, different browsers may have different plugins.

HTML5 defines a new element which specifies a standard way to include video: the <video> element.

Video Formats

Currently, there are 3 supported video formats for the video element:

• Ogg = Ogg files with Theora video codec and Vorbis audio codec
• MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec

The control attribute adds video controls, like play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video load).

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Today, Firefox, Opera, and Chrome support Ogg files. Internet Explorer, Chrome, and Safari support MPEG4 files.

To cover all the major browsers, use two <source> elements: One pointing to an MPEG4 file, and one pointing to an Ogg file.

HTML5 video Tags

HTML5 provides a new standard for media content:

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

New Form Elements

HTML5 offers more form elements, with more functionality:

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for better input control before sending it to the server:

The internet has changed a lot since HTML 4.01 became a standard in 1999.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5.

To better handle today’s internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.

New Markup Elements

New elements for better structure:

HTML5 is the next generation of HTML.
What is HTML5?

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

The previous version of HTML came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
How Did HTML5 Get Started?

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.

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

New Features

Some of the most interesting new features in HTML5:

The canvas element for drawing
The video and audio elements for media playback
Better support for local offline storage
New content specific elements, like article, footer, header, nav, section
New form controls, like calendar, date, time, email, url, search

Browser Support

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.