In this part of the tutorial, you will discover interactive examples (you will be able to change the code and see the results interactively) of HTML features. Some APIs or features are not yet available on every web browser, so you may need to try switch from one browser to another in order to run all the examples.

Forms

Excellent, detailed presentations about HTML5 forms by

Estelle Weyl : http://standardista.com/forms/
Tiffany B. Brown from Opera : http://tiffanybbrown.com/presentatio...11/html5forms/

Selecting files and directory

Use of the new "multiple" attribute for selecting several files at a time. In addition, uses the HTML5 File API for reading pictures and preview them : http://jsbin.com/ozacel/2/edit
Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit
Note that in the example the attribute is named "webkitdirectory" instead of "directory" as this is still an experimental implementation.

Date, time, etc.

Play with the new date input field (Opera only) : http://jsbin.com/otovut/2/edit

Color

Play with the new type=color input field (Opera only) : http://jsbin.com/itufey/2/edit

Number

Example of input field type=number (Opera, WebKit) : http://jsbin.com/unagec/2/edit

Email

Example of a form with a type=email input field : http://jsbin.com/uxajif/3/edit, see the use of pseudo CSS class invalid for styling. Try to submit the form to see Browser validation.
Example of a type=email input field with the use of the "multiple" attribute : http://jsbin.com/opaqam/2/edit

Drag'n'drop and File API

Access file details (name, size, type) : http://jsbin.com/ofelet/2/edit
Simple "drag images and instant preview" : http://jsbin.com/ewarak/2/edit
Same example but this time we added two input fields : one for selecting multiple files (<input type="file" multiple/>) and one for selecting a directory. Notice that both dropped files or selected files can be processed by the same piece of code for instant preview : http://jsbin.com/orurip/11/edit

Canvas

Video

Video capture

Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial"