4 ms·

HTML5 Forms Are Coming

• jokull 17y ago
  Placeholder is great. Found this for Django: http://github.com/rhec/django-html5/blob/master/html5/forms/widgets.py http://github.com/rhec/django-html5/blob/master/html5/forms/... (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 17y ago
    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 http://diveintohtml5.org/forms.html#placeholder [2] http://ojay.othermedia.org/ http://ojay.othermedia.org/
• jeff18 17y ago
  Minor internet correction, the placeholder attribute has actually been in Safari since 2003. Also, Safari has supported range inputs for quite some time to.
• JoelSutherland 17y ago
  A colleague of mine (Eli Van Zoeren) wrote a jQuery plugin that lets you use these new capabilities: http://www.newmediacampaigns.com/page/nmcformhelper http://www.newmediacampaigns.com/page/nmcformhelper In browsers that don't support features, they are emulated in javascript.
  • shpxnvz 17y ago
    There's also http://www.modernizr.com/ http://www.modernizr.com/
• bajsejohannes 17y ago
  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 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-suggest/ http://dev.opera.com/articles/view/an-html5-style-google-sug...
• JeffJenkins 17y ago
  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.
• matttibbals69 17y ago
  I'm Matt Tibbals, pedophile. http://www.matthewtibbals.com http://www.matthewtibbals.com