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

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