The document discusses new form elements and attributes introduced in HTML5. It provides details on 13 new input types for forms, such as color, date, and url. It also covers new form attributes like placeholder, pattern, required and describes how they can be used to provide validation and improve the user experience. The document includes examples of how to implement the new form features across different browsers and devices.

1. Web Forms 2.0 New form elements & Attributes in HTML5 Estelle Weyl www.Standardista.com@estellevw

3. HTML 4 <Input> Types button checkbox file hidden image password radio reset submit text <input type="…

4. <Input> Types New in HTML5 color date datetime datetime-local email month number range search tel time url week

5. <Input> Attributes in HTML4 name disabled* type maxlength readonly size value alt src height width checked* align * CSS pseudoclasses

6. New <Input> Attributes in HTML5 form readonly autocomplete autofocus list pattern required placeholder multiple list min max step formaction formenctype formmethod formtarget formnovalidate

7. Other Form Elements New <datalist> <output> <meter> <progress> <keygen> Old <form> <fieldset> <legend> <textarea> <label> <select> <option> <optgroup>* * Optgroups are nestable in HTML5

8. <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" type="text" /> </p>

9. Attribute Soup! <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p> http://standardista.com/webkit/ch4/input.html

10. <label> <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p>

11. Placeholder Attribute <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p> 4

12. Graceful Degredation $("input[placeholder]").each(function(){ if($(this).val()==""){ $(this).val($(this).attr("placeholder")); $(this).focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }); $(this).blur(function(){ if($(this).val()==""){ $(this).val($(this).attr("placeholder")); } }); } }); // on submit ensure: $(this).val() != $(this).attr("placeholder"))

13. Pattern Attribute <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p>

14. Required Attribute <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p>

15. Graceful Degredation Without Touching HTML! // use regExp from pattern to validate! // if has attribute required, can not be empty.

16. Targeting In CSS Without Touching HTML! :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write input[type=checkbox] input[required] input:not([required])

17. Autofocus Attribute <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p>

18. Type Attribute <p> <label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="{6,9}" required autofocus type="text" /> </p>

19. HTML 4 <Input> Types button- checkbox. file* hidden image. password. radio reset- submit text

20. 13 New <Input> Types in HTML5 color url tel email number range search date datetime datetime-local month time week

21. color <input type="color" …>

22. Color on Blackberry Color: <input type="color" id="txtColor" value="#FF0000"/>

23. color <input type="color" pattern="#[a-fA-F0-9]{6}" <input id="color" name="color" type="color" placeholder="#FFFFFF" pattern="#(?:[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})" required /> http://standardista.com/webkit/ch4/color.html

24. URL <input type="url" …>

25. URL <input id="url" name="url" type="url" placeholder="http://www.x.com" pattern="^http(s)?://.*" required /> http://standardista.com/webkit/ch4/url.html

26. Datalist

27. <p> <label for="url">Web Address: </label> <input id="url" name="url" type="url" placeholder="http://www.domain.com" required list="mydatalist"/ > </p> <datalist id="mydatalist"> <option value="http://www.standardista.com"/> <option value="http://www.apress.com" /><option value="http://www.evotech.net" /> </datalist> http://standardista.com/webkit/ch4/datalist.html

28. <datalist id="mydatalist"> <option value="http://www.standardista.com" label="standardista" /> <option value="http://www.apress.com" label="apress" /> <option value="http://www.evotech.net" label="Evotech"/> </datalist> http://standardista.com/webkit/ch4/datalist.html

29. <p> <label for="url">Web Address:</label> <input id="url" name="url" type="url" placeholder="http://www.domain.com" list="datalist" /> </p> <datalist id="datalist"> <label>or select one from the following list: <select name="url4"> <option value="http://www.standardista.com" /> <option value="http://www.apress.com" /> <option value="http://www.evotech.net" /> </select> </label> </datalist> http://standardista.com/webkit/ch4/datalist.html

31. Phone Numbers <input type="tel" …>

32. Phone Numbers <input type="tel" …>

33. Phone Numbers <label for="tel">Telephone: </label> <input id="tel" type="tel" name="tel" placeholder="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required /> http://standardista.com/webkit/ch4/phone.html

34. Email Addresses <label for="email">Email: </label> <input id="email" name="email" type="email" placeholder="you@domain.com" multiple required /> http://standardista.com/webkit/ch4/email.html

35. Email Addresses http://standardista.com/webkit/ch4/email.html

36. Number <input name="n" type="number"/> min max step http://standardista.com/webkit/ch4/number.html

37. <inputid="nickels" name="nickels" type="number" placeholder="0, 5, 10 &hellip;" pattern="[0-9]*[05]" min="0" max="1000" step="5" required /> http://standardista.com/webkit/ch4/number.html safari

38. <inputid="nickels" name="nickels" type="number" placeholder="0, 5, 10 &hellip;" pattern="[0-9]*[05]" min="0" max="1000" step="5" required /> Because all presentations are better with cats and unicorns http://standardista.com/webkit/ch4/number.html

39. http://standardista.com/webkit/ch4/number.html

40. Range <input id="range" name="range" type="range" placeholder="0 to 10" pattern="[0-9]|10" min="0" max="10" step="1" required /> http://standardista.com/webkit/ch4/range.html

41. Search <input id="search" name="search" type="search" placeholder="search terms" required /> http://standardista.com/webkit/ch4/search.html

42. Date Time <Input> Types date 2010-08-26 datetime 2010-08-26 19:00 datetime-local 2010-08-26 19:00 month 2010-08 time 19:00 week 2010-W34

43. Date Time <Input> Types date http://www.standardista.com/webkit/ch4/date.html datetimehttp://www.standardista.com/webkit/ch4/datetime.html datetime-localhttp://www.standardista.com/webkit/ch4/datetime-loca.html month http://www.standardista.com/webkit/ch4/month.html Timehttp://www.standardista.com/webkit/ch4/time.html weekhttp://www.standardista.com/webkit/ch4/month.html

45. Other Attributes Form Autofocus Autocomplete

46. Other Elements <meter> <progress> <keygen> <output>

47. Test Everything http://standardista.com/sandbox/html5formelements.html

48. Thanks @estellevw http://www.standardista.com http://evotech.net/blog

49. Credits Ma1974http://www.flickr.com/photos/ma1974/358477814/ Cornifyhttp://cornify.com