HTML5 Fantastic Forms for Mobile Web

HTML5 Fantastic Forms For Mobile Web @tammybutowWednesday, 23 May 12

Fantastic Forms For Mobile Web 01 Why you should know about HTML5 Forms 02 Live Demo 03 Syntax Review 04 Code Challenge Fantastic Forms @tammybutowWednesday, 23 May 12

http://www.ﬂickr.com/photos/58847482@N03/5597332989/Wednesday, 23 May 12

@zcorpan Simon Pieters @annevk Anne Van Kesteren Fantastic Forms @tammybutowhttp://dev.w3.org/html5/html4-diﬀerences/Wednesday, 23 May 12

Image of the people Mark Pilgrim Fantastic Forms @tammybutowhttp://diveintohtml5.info/forms.htmlWednesday, 23 May 12

@miketaylr miketaylr.comhttp://miketaylr.com/Wednesday, 23 May 12

@miketaylr miketaylr.comhttp://miketaylr.com/code/input-type-attr.htmlWednesday, 23 May 12

Fantastic Forms @tammybutowhttp://modernizr.com/Wednesday, 23 May 12

@ryanseddon thecssninja.com https://github.com/ryanseddon/H5FWednesday, 23 May 12

Why use HTML5 form features? ‣ Future Proof • Great for mobile and tablet devices • Form features degrade gracefully in every browser • You can use Modernizr to create JavaScript fallbacks ‣ Customer Friendly • Great for people on-the-go • Makes it easier for people to know what data you need • Good for slow connections on mobile Fantastic Forms @tammybutowWednesday, 23 May 12

Making Stuﬀ Is Fun A mobile web form to collect stuﬀ Fantastic Forms @tammybutowWednesday, 23 May 12

Fantastic Forms for Mobile Web Required Fields Date Picker Placeholder Text HTML5 Number Spinbox Forms Number Slider Custom Keyboards Autofocus Validation Fantastic Forms @tammybutowWednesday, 23 May 12

Required Fields ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Required Fields ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Date Picker ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Date Picker ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Date Picker ‣ index.html Fantastic Forms @tammybutow FC-compliant email validationWednesday, 23 May 12

Placeholder Text ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Placeholder Text ‣ index.html <form> <label>Full name:</label> <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Fantastic Forms for Mobile Web Required Fields Date Picker Placeholder Text HTML5 Number Forms Number Slider Custom Keyboards Autofocus Validation Fantastic Forms @tammybutowWednesday, 23 May 12

Number ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Number ‣ index.html <form> <label>How many team members:</label> <input type="number" id=“project_range” name=“project_range” min="1" max="10" step="1" value="1"> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Number Slider ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Number Slider ‣ index.html <form> <label>How complete is your project:</label> <input type="range" id=“project_range” name=“project_range” min=“1” max=“100” step=“10” value=“10” > </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Standard Number Tel URL ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Custom Keyboards ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Custom Keyboards ‣ index.html <form> <label>URL:</label> <input type="url" id=“url” name=“url” placeholder = “http:// yourproject.com” required> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Autofocus ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Autofocus ‣ index.html <form> <label>Full name:</label> <input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Validation ‣ index.html The browser automatically offers RFC-compliant email validation, even if scripting is disabled. Fantastic Forms @tammybutowWednesday, 23 May 12

Validation ‣ index.html Fantastic Forms @tammybutowWednesday, 23 May 12

Validation ‣ index.html <form> <label>Email address:</label> <input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required> </form> Fantastic Forms @tammybutowWednesday, 23 May 12

Code Challenge ‣ Create a mobile web page • You could try out the initializr reponsive web template (On GITHUB) ‣ Add a HTML5 Form • Try out diﬀerent input types and attributes ‣ Share it • Tweet the link/screenshot and add the #WDC12 hashtag ‣ Have fun ☺ Fantastic Forms @tammybutowWednesday, 23 May 12

HTML5 Fantastic Forms For Mobile Web @tammybutowWednesday, 23 May 12

HTML5 Fantastic Forms for Mobile Web

by Tammy Butow

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 23

Statistics