

HTML5 Forms Are Coming - roam
http://snook.ca/archives/html_and_css/html5-forms-are-coming

======
JeffJenkins
I ran into an issue in 2006 because a coworker was clever and used a "date"
input for a date. Most browsers just ignored it, but I was using Opera which
implemented Web Forms 2.0. While I got a better experience (with a nice pop-up
date picker), the form put the date in using the wrong format and his code
couldn't read it.

------
jokull
Placeholder is great. Found this for Django: [http://github.com/rhec/django-
html5/blob/master/html5/forms/...](http://github.com/rhec/django-
html5/blob/master/html5/forms/widgets.py) (however it looks shallow; I already
spot that EmailField doesn't subclass the old EmailField which as server side
validation). Would like to see these with their respective server side
validators.

~~~
ionfish
Dive Into HTML5 [1] demonstrates how one can detect placeholder support; the
obvious use case is to use the focus and blur events to mimic the
functionality if native support isn't present.

Here's some example code, using Ojay [2].

    
    
        /**
         * Places the label for a text field within that field, for a simpler
         * and more intuitive interface to e.g. search forms.
         */
        var labelInField = function(field) {
            var input = Ojay(field), label = Ojay.Forms.getLabel(field).hide();
            if (!label.node || !input.node) return;
        
            var labelText = label.node.innerHTML.stripTags(),
                inputType = input.node.type || 'text';
        
            // Don't bother setting up the event handlers if the browser can detect
            // the HTML5 placeholder text.
            if ('placeholder' in document.createElement('input') && input.node.placeholder.length > 1) return;
        
            var focus = function() {
                input.removeClass('empty');
                if (input.node.value == labelText) input.node.value = '';
            };
        
            var blur = function() {
                if (input.node.value && input.node.value != labelText) return;
                input.addClass('empty');
                if (inputType == 'text') input.node.value = labelText;
            };
        
            blur();
        
            input.on('focus', focus);
            input.on('blur', blur);
        };
    

[1] <http://diveintohtml5.org/forms.html#placeholder>

[2] <http://ojay.othermedia.org/>

------
JoelSutherland
A colleague of mine (Eli Van Zoeren) wrote a jQuery plugin that lets you use
these new capabilities:

<http://www.newmediacampaigns.com/page/nmcformhelper>

In browsers that don't support features, they are emulated in javascript.

~~~
shpxnvz
There's also <http://www.modernizr.com/>

------
bajsejohannes
There is also an experimental version of datalist in Opera (and possibly other
browsers). Demo at <http://html5.org/demos/dev.opera.com/article-
examples.html> (only the first one seems to work in latest Opera).

Full article at [http://dev.opera.com/articles/view/an-html5-style-google-
sug...](http://dev.opera.com/articles/view/an-html5-style-google-suggest/)

------
jeff18
Minor internet correction, the placeholder attribute has actually been in
Safari since 2003. Also, Safari has supported range inputs for quite some time
to.

