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

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.

Drag'n'drop and File API

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"