View
6.181
Download
0
Category
Tags:
Preview:
DESCRIPTION
Hello. This is my slidedeck from Web Directions Code 2012 in Melbourne Australia. You can see more about the conference here: I'm on Twitter: @tammybutow Here's the links from the slides :) http://dev.w3.org/html5/html4-differences/ http://diveintohtml5.info/forms.html http://miketaylr.com/ http://miketaylr.com/code/input-type-attr.html http://modernizr.com https://github.com/ryanseddon/H5F Thanks! :)
Citation preview
HTML5 Fantastic Forms For Mobile Web@tammybutow
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
Wednesday, 23 May 12
http://www.flickr.com/photos/58847482@N03/5597332989/Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
@zcorpan@zcorpanSimon PietersSimon Pieters
http://dev.w3.org/html5/html4-differences/
Anne Van KesterenAnne Van Kesteren@annevk@annevk
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Image of the people
Mark PilgrimMark Pilgrim
http://diveintohtml5.info/forms.htmlWednesday, 23 May 12
@miketaylrmiketaylr.com
@miketaylrmiketaylr.com
http://miketaylr.com/Wednesday, 23 May 12
http://miketaylr.com/code/input-type-attr.html
@miketaylrmiketaylr.com
@miketaylrmiketaylr.com
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutowhttp://modernizr.com/
Wednesday, 23 May 12
https://github.com/ryanseddon/H5F
@ryanseddonthecssninja.com
@ryanseddonthecssninja.com
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ 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
Why use HTML5 form features?
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Making Stuff Is FunA mobile web form to collect stuff
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
03 Syntax Review
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Required Fields
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Required Fields
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Required Fields
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Required Fields
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Date Picker
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Date Picker
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Date Picker
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Date Picker
FC-compliant email validationWednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Placeholder Text
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Placeholder Text
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>
</form>
Placeholder Text
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>
</form>
Placeholder Text
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Number‣ index.html
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Number
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ 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>
Number
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ 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>
Number
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Number Slider‣ index.html
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Number Slider
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ 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>
Number Slider
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ 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>
Number Slider
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Standard Number Tel URL‣ index.html
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Custom Keyboards
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>URL:</label><input type="url" id=“url” name=“url” placeholder = “http://yourproject.com” required>
</form>
Custom Keyboards
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>URL:</label><input type="url" id=“url” name=“url” placeholder = “http://yourproject.com” required>
</form>
Custom Keyboards
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Autofocus ‣ index.html
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Autofocus
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Full name:</label><input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus>
</form>
Autofocus
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Full name:</label><input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus>
</form>
Autofocus
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Fantastic Forms for Mobile Web
HTML5 Forms Number Slider
Placeholder Text
Date Picker
Autofocus
Required Fields
Number Spinbox
Custom Keyboards
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Validation ‣ index.html
The browser automatically offers RFC-compliant email validation, even if
scripting is disabled.
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Email address:</label><input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required>
</form>
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
‣ index.html
<form>
<label>Email address:</label><input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required>
</form>
Validation
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
03 Syntax Review
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
Fantastic Forms For Mobile Web
02 Live Demo
04 Code Challenge
03 Syntax Review
01 Why you should know about HTML5 Forms
02 Live Demo
Wednesday, 23 May 12
Fantastic Forms @tammybutow@tammybutow
Code Challenge‣ Create a mobile web page
• You could try out the initializr reponsive web template (On GITHUB)
‣ Add a HTML5 Form• Try out different input types and attributes
‣ Share it• Tweet the link/screenshot and add the #WDC12 hashtag
‣ Have fun ☺
Wednesday, 23 May 12
@tammybutowHTML5 Fantastic Forms For Mobile Web
Wednesday, 23 May 12
Recommended