HTML5 Web Forms

14,603 views

Published on

HTML forms have been the bane of web developers for years. Not anymore!

With HTML5 you may learn to love forms. Imagine a day when you can validate a form without any JavaScript. Date pickers, place holder text, pattern matching, required fields, auto focus, error handling, all without JavaScript? That day is not as far off as you think. In this session we'll discuss new to HTML5 form input types and attributes. We can't promise that you'll love creating web forms, but you will gain a new, exciting appreciation.

We'll learn all about creating dynamic web forms with form validation without the use of javascript.

Sneak peak into the presentation...


The new HTML5 input types
Controlling what keyboard types gets displayed on touch keyboards, including the iPad and iPhone,
Placeholder Attribute: Adding native placeholder text and clearing on focus
Native form validation: Error messages with no javascript
Date & time input types: The jQuery datepicker, without jQuery.
Providing focus to a form element, including focus on invalid input without javascript.
CSS & Forms: Stylizing form elements based on current states of required and invalid
Pattern attribute - Pattern matching for form input: with regular expressions and no javascript
element and list attribute- providing autosuggest on inputs, again no javascript.

Browsers are beginning to support HTML5 web forms. In this session we'll learn how to implement them.

Published in: Technology
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
14,603
On SlideShare
0
From Embeds
0
Number of Embeds
8,380
Actions
Shares
0
Downloads
0
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide
  • Stylizable
  • Unchecked checkboxes are omitted from the data submitted by the form.   Might be worth clarifying that "unchecked checkboxes are omitted from the data submitted by the form." This wording makes it sound like any unchecked checkbox prevents form data submission. It caught me off guard when I read that.File does not work on iPhone / iPod /iPadWhen using password, use post.Image = like sumbitButton = nothing -> needs js to do anythingReset can lead to bad User experience
  • Unchecked checkboxes are omitted from the data submitted by the form.   Might be worth clarifying that "unchecked checkboxes are omitted from the data submitted by the form." This wording makes it sound like any unchecked checkbox prevents form data submission. It caught me off guard when I read that.File does not work on iPhone / iPod /iPadWhen using password, use post.Image = like sumbitButton = nothing -> needs js to do anythingReset can lead to bad User experience
  • Unchecked checkboxes are omitted from the data submitted by the form.   Might be worth clarifying that "unchecked checkboxes are omitted from the data submitted by the form." This wording makes it sound like any unchecked checkbox prevents form data submission. It caught me off guard when I read that.File does not work on iPhone / iPod /iPadWhen using password, use post.Image = like sumbitButton = nothing -> needs js to do anythingReset can lead to bad User experience
  • Hexadecimal 6 char or keyword color only
  • HTML5 Web Forms

    1. 1. Web Forms 2.0<br />New form elements & Attributes in HTML5<br />Estelle Weyl<br />www.Standardista.com@estellevw<br />
    2. 2.
    3. 3. HTML 4 <Input> Types<br />button<br />checkbox<br />file<br />hidden<br />image<br />password<br />radio<br />reset<br />submit<br />text<br /><input type="…<br />
    4. 4. <Input> Types New in HTML5<br />color<br />date <br />datetime<br />datetime-local <br />email <br />month <br />number <br />range <br />search<br />tel<br />time <br />url<br />week<br />
    5. 5. <Input> Attributes in HTML4<br /> name <br /> disabled* <br /> type <br />maxlength<br />readonly<br />size<br /> value <br /> alt<br />src<br /> height<br /> width<br /> checked*<br />align<br />* CSS pseudoclasses<br />
    6. 6. New <Input> Attributes in HTML5<br /> form<br />readonly<br />autocomplete<br /> autofocus <br /> list <br /> pattern <br /> required <br /> placeholder<br /> multiple<br /> list<br /> min<br /> max<br /> step<br />formaction<br />formenctype<br />formmethod<br />formtarget<br />formnovalidate<br />
    7. 7. Other Form Elements<br />New<br /> <datalist><br /> <output><br /> <meter><br /> <progress><br /> <keygen><br />Old<br /> <form><br /> <fieldset><br /> <legend><br /> <textarea><br /> <label><br /> <select><br /> <option><br /> <optgroup>*<br />* Optgroups are nestable in HTML5<br />
    8. 8. <p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" type="text" /><br /></p><br />
    9. 9. Attribute Soup!<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />http://standardista.com/webkit/ch4/input.html<br />
    10. 10. <label><br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />
    11. 11. Placeholder Attribute<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />4<br />
    12. 12. Graceful Degredation<br />$("input[placeholder]").each(function(){<br />if($(this).val()==""){<br /> $(this).val($(this).attr("placeholder"));<br /> $(this).focus(function(){<br />if($(this).val()==$(this).attr("placeholder")) $(this).val("");<br /> });<br /> $(this).blur(function(){<br />if($(this).val()==""){<br /> $(this).val($(this).attr("placeholder"));<br /> }<br /> });<br /> }<br />});<br />// on submit ensure: $(this).val() != $(this).attr("placeholder")) <br />
    13. 13. Pattern Attribute<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />
    14. 14. Required Attribute<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />
    15. 15. Graceful Degredation Without Touching HTML!<br />// use regExp from pattern to validate!<br />// if has attribute required, can not be empty.<br />
    16. 16. Targeting In CSS Without Touching HTML!<br />:default<br />:valid<br />:invalid<br />:in-range<br />:out-of-range<br />:required<br />:optional<br />:read-only<br />:read-write<br />input[type=checkbox]<br />input[required]<br />input:not([required])<br />
    17. 17. Autofocus Attribute<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />
    18. 18. Type Attribute<br /><p> <br /> <label for="inputID">Label: </label> <br /> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required<br /> autofocus type="text" /><br /></p><br />
    19. 19. HTML 4 <Input> Types<br />button-<br />checkbox.<br />file*<br />hidden<br />image.<br />password.<br />radio<br />reset-<br />submit<br />text<br />
    20. 20. 13 New <Input> Types in HTML5<br />color <br />url<br />tel<br />email<br />number<br />range<br />search <br />date <br />datetime<br />datetime-local<br />month <br />time<br />week<br />
    21. 21. color<br /><input type="color" …><br />
    22. 22. Color on Blackberry<br />Color: <input type="color" id="txtColor" value="#FF0000"/><br />
    23. 23. color<br /><input type="color" <br />pattern="#[a-fA-F0-9]{6}"<br /><input id="color" name="color" type="color" placeholder="#FFFFFF" <br /> pattern="#(?:[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})" required /><br />http://standardista.com/webkit/ch4/color.html<br />
    24. 24. URL<br /><input type="url" …><br />
    25. 25. URL<br /><input id="url" name="url" type="url" placeholder="http://www.x.com" pattern="^http(s)?://.*" required /><br />http://standardista.com/webkit/ch4/url.html<br />
    26. 26. Datalist<br />
    27. 27. <p><br /> <label for="url">Web Address: </label><br /> <input id="url" name="url" type="url" <br /> placeholder="http://www.domain.com" <br /> required <br /> list="mydatalist"/ ><br /></p><br /><datalist id="mydatalist"> <br /> <option value="http://www.standardista.com"/> <option value="http://www.apress.com" /><option value="http://www.evotech.net" /><br /></datalist><br /> <br />http://standardista.com/webkit/ch4/datalist.html<br />
    28. 28. <datalist id="mydatalist"> <br /><option value="http://www.standardista.com" label="standardista" /> <option value="http://www.apress.com" label="apress" /> <option value="http://www.evotech.net" label="Evotech"/><br /></datalist><br /> <br />http://standardista.com/webkit/ch4/datalist.html<br />
    29. 29. <p><br /><label for="url">Web Address:</label><br /> <input id="url" name="url" <br /> type="url" <br /> placeholder="http://www.domain.com"<br /> list="datalist" /><br /></p><br /><datalist id="datalist"> <br /><label>or select one from the following list:<br /><select name="url4"> <br /><option value="http://www.standardista.com" /><br /><option value="http://www.apress.com" /><br /><option value="http://www.evotech.net" /> <br /></select><br /></label><br /></datalist><br />http://standardista.com/webkit/ch4/datalist.html<br />
    30. 30.
    31. 31. Phone Numbers<br /><input type="tel" …><br />
    32. 32. Phone Numbers<br /><input type="tel" …><br />
    33. 33. Phone Numbers<br /><label for="tel">Telephone: </label><br /><input id="tel" type="tel" name="tel" placeholder="XXX-XXX-XXXX" <br /> pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" <br /> required /><br />http://standardista.com/webkit/ch4/phone.html<br />
    34. 34. Email Addresses<br /><label for="email">Email: </label><br /><input id="email" name="email" type="email" placeholder="you@domain.com" <br />multiple <br /> required /><br />http://standardista.com/webkit/ch4/email.html<br />
    35. 35. Email Addresses<br />http://standardista.com/webkit/ch4/email.html<br />
    36. 36. Number<br /> <input name="n" type="number"/><br /> min<br /> max<br /> step<br />http://standardista.com/webkit/ch4/number.html<br />
    37. 37. <inputid="nickels" name="nickels" <br />type="number" <br />placeholder="0, 5, 10 &hellip;" pattern="[0-9]*[05]" <br /> min="0" <br /> max="1000" <br /> step="5" <br /> required /><br />http://standardista.com/webkit/ch4/number.html<br />safari<br />
    38. 38. <inputid="nickels" name="nickels" <br />type="number" <br />placeholder="0, 5, 10 &hellip;" pattern="[0-9]*[05]" <br /> min="0" <br /> max="1000" <br /> step="5" <br /> required /><br />Because all presentations are better <br />with cats and unicorns<br />http://standardista.com/webkit/ch4/number.html<br />
    39. 39. http://standardista.com/webkit/ch4/number.html<br />
    40. 40. Range<br /><input id="range" name="range"<br />type="range"<br />placeholder="0 to 10"<br />pattern="[0-9]|10"<br />min="0" max="10"<br />step="1"<br />required /><br />http://standardista.com/webkit/ch4/range.html<br />
    41. 41. Search<br /><input id="search" name="search" type="search"<br /> placeholder="search terms" required /><br />http://standardista.com/webkit/ch4/search.html<br />
    42. 42. Date Time <Input> Types<br />date 2010-08-26<br />datetime 2010-08-26 19:00<br />datetime-local 2010-08-26 19:00<br />month 2010-08<br />time 19:00<br />week 2010-W34<br />
    43. 43. Date Time <Input> Types<br />date http://www.standardista.com/webkit/ch4/date.html<br />datetimehttp://www.standardista.com/webkit/ch4/datetime.html<br />datetime-localhttp://www.standardista.com/webkit/ch4/datetime-loca.html<br />month http://www.standardista.com/webkit/ch4/month.html<br />Timehttp://www.standardista.com/webkit/ch4/time.html<br />weekhttp://www.standardista.com/webkit/ch4/month.html<br />
    44. 44.
    45. 45. Other Attributes<br />Form<br />Autofocus<br />Autocomplete<br />
    46. 46. Other Elements<br /><meter><br /><progress><br /><keygen><br /><output><br />
    47. 47. Test Everything<br />http://standardista.com/sandbox/html5formelements.html<br />
    48. 48. Thanks<br />@estellevw<br />http://www.standardista.com<br />http://evotech.net/blog<br />
    49. 49. Credits<br />Ma1974http://www.flickr.com/photos/ma1974/358477814/<br />Cornifyhttp://cornify.com<br />

    ×