• Like
Html5formstoday
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Html5formstoday

  • 939 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
939
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 forms today. @miketaylr Monday, November 23, 2009
  • 2. <input> is sexy. Monday, November 23, 2009
  • 3. <input> is sexy. (RAWR) Monday, November 23, 2009
  • 4. Monday, November 23, 2009
  • 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. 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. 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. 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. Webkit Nightly Monday, November 23, 2009
  • 10. Opera 10.10 Monday, November 23, 2009
  • 11. Chromium Nightly Monday, November 23, 2009
  • 12. Chrome 4 Monday, November 23, 2009
  • 13. Safari 4.0.x Monday, November 23, 2009
  • 14. Firefox 3.6b3 Monday, November 23, 2009
  • 15. Firefox 3.5.x Monday, November 23, 2009
  • 16. IE 8 Monday, November 23, 2009
  • 17. Javascript to the rescue. Monday, November 23, 2009
  • 18. jquery.autofocus.js (function($) { $.fn.autofocus = function() { return(this[0].autofocus!==true) ? this.focus() : this; }; })(jQuery); Monday, November 23, 2009
  • 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. 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. 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. 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. Thanks. http://www.miketaylr.com http://www.github.com/miketaylr @miketaylr Monday, November 23, 2009