HTML 5 playground

This page is valid html 5. You should be able to hear the sound of a piano if you press play on the media control below.

This page does not contain any javascript, flash, or other embedded stuff - only clean html 5.

PS: Html 5 was still in development as of writing this document (Jan-2014) The standard may change in the future.


For embedded video demo, please see the separate page on this topic.

SVG vector graphics

The examples I found on how to put SVG into html didn't quite work, so here's an ugly html 4 style <embed> tag. I guess we'll be stuck with those for now...

New input types

Html5 offers many new input types, that everyone has been needing for more than a decade. It also lets you select multiple files at once when uploading files. Here you can see how your browser decides to display the new input types. (Currently Opera is the only browser capable of showing them correctly):

Input field in question Example Editor's notes
Time related: Pick a date: The format returned to the server seems to be in the YYYY-MM-DD format.
Time related: Pick a local date:
Time related: Time of day:
Time related: Select a week: Watch out here. Week numbers are not an international standard, and the rules what how "Week 1" is defined vary. The returned format appears to be "2012-W24".
File requester with multi-select:
Pick a color: Currently only implemented by Opera in a slightly clumsy fashion: First click gives a small list of some arbitrarily selected colors. Such a list should be populated by the web designer, as he is the only one who has a good idea which colors would be relevant for whatever is being selected. Alternatively it should show the full color picker offered by the operating system directly. The returned format is #123ABC (but may be lowercase for some browsers.)
Pick a value between 1 and 6, step 2: When stepsize is set to 2, you can step from 1 to 3 to 5, but never reach 6 using the mouse. You can enter any number manually though.
How many percent? (value between 0 and 100, step 5): Notice that you cannot see what value you have selected. Most likely you can only give direct user feedback using javascript.
Internet search:
E-mail address: Apparently these will be automatically validated when submitted. Personally I think validation should happen before you submit stuff.
Phone number: