Each HTML document loaded into a browser window becomes a Document object.

The Document object provides access to all HTML elements in a page, from within a script.

Tip: The Document object is also part of the Window object, and can be accessed through the window.document property.

Document Object Collections

W3C: W3C Standard.

Document Object Properties

Document Object Methods

source form: w3schools

HTML5 has several new elements and attributes for forms.

This chapter covers the new form elements:

• <datalist>
• <keygen>
• <output>

Browser Support

<datalist> Element

The <datalist> element specifies a list of options for an input field.

The list is created with <option> elements inside the <datalist>.

To bind a <datalist> to an input field, let the list attribute of the input field refer to the id of the datalist:

Tip: The <option> elements should always have a value attribute.

<keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public.

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

Currently, the browser support for this element is not good enough to be a useful security standard.

<output> Element

The <output> element is used for different types of output, like calculations or script output:

HTML5 New Form Elements

source form: w3schools

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.

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.

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:

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

Try an example with all the restriction attributes: Try it yourself

Input Type – range

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:

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:

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:

HTML5 <input> Tag

source form: w3schools

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:

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

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:

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

source form: w3schools

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.

Below are the global event attributes that can be added to HTML5 elements to define event actions.

New : New event attributes in HTML5.

Window Event Attributes

Events triggered for the window object (applies to the <body> tag):

Form Events

Events triggered by actions inside a HTML form (applies to all HTML5 elements, but is most common in form elements):

Keyboard Events

Events triggered by a keyboard (applies to all HTML5 elements):

Mouse Events

Events triggered by a mouse, or similar user actions (applies to all HTML5 elements):

Media Events

Events triggered by medias like videos, images and audio (applies to all HTML5 elements, but is most common in media elements, like audio, embed, img, object, and video):

source form: w3schools

source form: w3schools

The canvas element has no drawing abilities of its own.

A canvas is a rectangular area, where you can control every pixel using JavaScript.

HTML5 has a built-in object for the canvas element, the getContext(“2d”) object.

The getContext(“2d”) object has methods to draw lines, boxes, circles, and more.

Colors and Styles

Path, Curve, Circle, and Rectangle

Transformations

Text

Images and Pixel Manipulation

Compositing

source form: w3schools

For a complete reference of all the properties and methods that can be used with the Math object, go to our complete Math object reference.

The reference contains a brief description and examples of use for each property and method!

Math Object

The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and methods.

Syntax for using properties/methods of Math:

Note: Math is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it.

Mathematical Constants

JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.

You may reference these constants from your JavaScript like this:

Mathematical Methods

In addition to the mathematical constants that can be accessed from the Math object there are also several methods available.

The following example uses the round() method of the Math object to round a number to the nearest integer:

The code above will result in the following output:

The following example uses the random() method of the Math object to return a random number between 0 and 1:

The code above can result in the following output:

The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:

The code above can result in the following output:

source form: w3schools

For a complete reference of all the properties and methods that can be used with the Boolean object, go to our complete Boolean object reference.

The reference contains a brief description and examples of use for each property and method!

Create a Boolean Object

The Boolean object represents two values: “true” or “false”.

The following code creates a Boolean object called myBoolean:

If the Boolean object has no initial value, or if the passed value is one of the following:

• 0
• -0
• null
• “”
• false
• undefined
• NaN

the object it is set to false. For any other value it is set to true (even with the string “false”)!

source form: w3schools

For a complete reference of all the properties and methods that can be used with the Array object, go to our complete Array object reference.

The reference contains a brief description and examples of use for each property and method!

What is an Array?

An array is a special variable, which can hold more than one value, at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The best solution here is to use an array!

An array can hold all your variable values under a single name. And you can access the values by referring to the array name.

Each element in the array has its own ID so that it can be easily accessed.

Create an Array

An array can be defined in three ways.

The following code creates an Array object called myCars:

1:

2:

3:

Note: If you specify numbers or true/false values inside the array then the variable type will be Number or Boolean, instead of String.

Access an Array

You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.

The following code line:

will result in the following output:

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index number:

Now, the following code line:

will result in the following output:

source form: w3schools