HTML 5: active validation, date pickers, and local storage mechanisms

Just watched Ian Hickson’s demo of html 5 and since it’s over an hour thought it would be helpful to just type these out.

Video Tag
It’s been known for a while that there will be a video tag now instead of working with an embed and object tag.  Below is a possible use of using a video tag.  Notice that the keyword “controls” is what puts the controls on the video to control playback.  They aren’t very pretty at the moment but very cool to have video controls already on top of a movie rather than having to skin it with a player.  Another one is the autoplay where previously it would have been autoplay=true it is now just the keyword autoplay.

Another nice addition to the video tag is that once we can stop/start/pause etc a video by just referencing that html element.  See Below.

$('video').play()
$('video').stop()
$('video').pause()

Local Storage
Can save and open data locally. Think of a multipage form where you are normally storing data as you go but it is stored server side typically.  This is a way to store everything client side with easy access to your data.   Data is saved amongst pages, similar to cookies or session data. Local storage is more similar to a cookie while session storage is very similar to session data in that the data only lasts as long as the browser’s session.

localStorage.setItem(key,value);
localStorage.openItem(key);
localStorage.myvar; <!--Accessing directly by key-->

Drag and Drop
Drag and drop is now built into html.  You can utilize functions drag and drop. Ian mentioned that the API wasn’t that great yet but very cool to see this kind of behavior included already.

Actions on hash change
Can fire scripts on hash change. Hash meaning the anchor tag of a link.  So when you click a link that references page.html#first you can now act on it.

Modifications to inputs
There’s now an input type=”range” which gives you a slider bar. You use the oninput attribute to take action on anything that is happening with the slider bar.

There’s also now an input type=date! Once you set this it gives you a calendar date picker. Very similar to all of the javascript date pickers that are currently used. This will be very beneficial when having date fields.

Output tags
You can create output tags and give it a name and print your output to there instead of doing document.getElementById(‘output’).  It would be nice to see a $() implementation to access elements to compliment the very archaic document.getElementById();.  It sounded like currently this is only supported within forms.

<output name=”main”></output>
main.value = “my new value”;

Validation
input type=email can now be automatically validated as an email address.  The css style :validated can used to style what invalid input looks like such as a red background or border. It uses active validation too so as you type it validates the email and lets the user know when it is valid.  Typically we have to code this in js and attach an observer to the field for this same behavior.

To validate a required field in a form the keyword required just needs to be specified within the input tag. The autofocus keyword is also used to focus on load, this is put in the input tag.

DataLists
New input type <datalist> lets you set predefined values that the user can select from but the user can then also enter their own value.  The field displays as a textbox and upon click or typing it shows the available options, if the user doesn’t want to use those then they can type their own option.

• ondrop, ondrag, ondragover added as event handler for objects. Some of those have been supported previously in safari and IE.
• URL fields pull urls straight from your history.
• The script and style tag no longer needs language or type.  Not a huge improvement but nice to get rid of it.
• Can interact with content within frames such as passing variables and other actions needed.