Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5formstoday

1,274 views

Published on

Lightning talk given at Standards.next, on html5 forms support.

Published in: Technology
  • Be the first to comment

Html5formstoday

  1. 1. HTML5 forms today. @miketaylr Monday, November 23, 2009
  2. 2. <input> is sexy. Monday, November 23, 2009
  3. 3. <input> is sexy. (RAWR) Monday, November 23, 2009
  4. 4. Monday, November 23, 2009
  5. 5. Types search,url, tel, email, datetime, date, month, week, time, datetimelocal, number, range, color Attributes accept, autofocus, autocomplete, list, pattern, placeholder, required, multiple, readonly, max, min, step Monday, November 23, 2009
  6. 6. Types search,url, tel, email, datetime, date, month, week, time, datetimelocal, number, range, color Attributes accept, autofocus, autocomplete, list, pattern, placeholder, required, multiple, readonly, max, min, step Monday, November 23, 2009
  7. 7. Types search,url, tel, email, datetime, date, month, week, time, datetimelocal, number, range, color Attributes accept, autofocus, autocomplete, list, pattern, placeholder, required, multiple, readonly, max, min, step Support? Monday, November 23, 2009
  8. 8. Types search,url, tel, email, datetime, date, month, week, time, datetimelocal, number, range, color Attributes accept, autofocus, autocomplete, list, pattern, placeholder, required, multiple, readonly, max, min, step Support? http://bit.ly/html5forms Monday, November 23, 2009
  9. 9. Webkit Nightly Monday, November 23, 2009
  10. 10. Opera 10.10 Monday, November 23, 2009
  11. 11. Chromium Nightly Monday, November 23, 2009
  12. 12. Chrome 4 Monday, November 23, 2009
  13. 13. Safari 4.0.x Monday, November 23, 2009
  14. 14. Firefox 3.6b3 Monday, November 23, 2009
  15. 15. Firefox 3.5.x Monday, November 23, 2009
  16. 16. IE 8 Monday, November 23, 2009
  17. 17. Javascript to the rescue. Monday, November 23, 2009
  18. 18. jquery.autofocus.js (function($) { $.fn.autofocus = function() { return(this[0].autofocus!==true) ? this.focus() : this; }; })(jQuery); Monday, November 23, 2009
  19. 19. jquery.autofocus.js (function($) { $.fn.autofocus = function() { return(this[0].autofocus!==true) ? this.focus() : this; }; })(jQuery); <input type="text" autofocus> Monday, November 23, 2009
  20. 20. jquery.autofocus.js (function($) { $.fn.autofocus = function() { return(this[0].autofocus!==true) ? this.focus() : this; }; })(jQuery); <input type="text" autofocus> $('[autofocus=""]').autofocus(); Monday, November 23, 2009
  21. 21. jquery.placeholder.js (function($) { $.fn.placeholder = function() { return ((typeof this[0].placeholder !== 'undefined')) ? this : this.each(function() { magic() && ponies(); }); })(jQuery); Monday, November 23, 2009
  22. 22. jquery.placeholder.js (function($) { $.fn.placeholder = function() { return ((typeof this[0].placeholder !== 'undefined')) ? this : this.each(function() { magic() && ponies(); }); })(jQuery); <input type="email" placeholder=”foo@bar.com”> $('[placeholder]').placeholder(); Monday, November 23, 2009
  23. 23. Thanks. http://www.miketaylr.com http://www.github.com/miketaylr @miketaylr Monday, November 23, 2009

×