Html5formstoday

1,258 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,258
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×