HTML5 Fantastic Forms for Mobile Web

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



04 Code Challenge

03 Syntax Review



02 Live Demo



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

http://www.flickr.com/photos/58847482@N03/5597332989/

http://www.flickr.com/photos/58847482@N03/5597332989/


@zcorpan@zcorpanSimon PietersSimon Pieters

http://dev.w3.org/html5/html4-differences/

Anne Van KesterenAnne Van Kesteren@annevk@annevk


http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html%23association-of-controls-and-forms







Image of the people

Mark PilgrimMark Pilgrim

http://diveintohtml5.info/forms.htmlWednesday, 23 May 12

http://diveintohtml5.info/forms.html

http://diveintohtml5.info/forms.html

@miketaylrmiketaylr.com


http://miketaylr.com/Wednesday, 23 May 12

http://miketaylr.com/code/input-type-attr.html


Fantastic Forms @tammybutow@tammybutowhttp://modernizr.com/


http://modernizr.com/

http://modernizr.com/

https://github.com/ryanseddon/H5F

@ryanseddonthecssninja.com

@ryanseddonthecssninja.com





‣ 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?



04 Code Challenge

03 Syntax Review



02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo


02 Live Demo



Making Stuff Is FunA mobile web form to collect stuff



04 Code Challenge

03 Syntax Review



02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo


02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo

03 Syntax Review


02 Live Demo



Fantastic Forms for Mobile Web

HTML5 Forms Number Slider

Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



‣ index.html

Required Fields



‣ index.html

<form>

<label>Launch date:</label>

<input type="date" id="launch_date" name="launch_date" required>

</form>

Required Fields





Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



‣ index.html

Date Picker



‣ index.html

<form>

<label>Launch date:</label>

<input type="date" id="launch_date" name="launch_date" required>

</form>

Date Picker



‣ index.html

Date Picker

FC-compliant email validationWednesday, 23 May 12




Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



‣ index.html

Placeholder Text



‣ index.html

<form>

<label>Full name:</label>

<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

</form>

Placeholder Text





Placeholder Text

Date Picker

Autofocus

Required Fields

Number

Custom Keyboards

Validation



Number‣ index.html



‣ index.html

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>

Number





Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



Number Slider‣ index.html



‣ index.html

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>

Number Slider





Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



Standard Number Tel URL‣ index.html



‣ index.html

Custom Keyboards



‣ index.html

<form>

<label>URL:</label><input type="url" id=“url” name=“url” placeholder = “http://yourproject.com” required>

</form>

Custom Keyboards


http://yourproject.com







Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



Autofocus ‣ index.html



‣ index.html

Autofocus



‣ index.html

<form>

<label>Full name:</label><input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus>

</form>

Autofocus





Placeholder Text

Date Picker

Autofocus

Required Fields

Number Spinbox

Custom Keyboards

Validation



Validation ‣ index.html

The browser automatically offers RFC-compliant email validation, even if

scripting is disabled.



‣ index.html

Validation



‣ index.html

<form>

<label>Email address:</label><input type="email" id=“email_addr” name=“email_addr” placeholder = “[email protected]” required>

</form>

Validation


mailto:[email protected]

mailto:[email protected]


04 Code Challenge

03 Syntax Review



02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo


02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo

03 Syntax Review


02 Live Demo



04 Code Challenge

03 Syntax Review



02 Live Demo

04 Code Challenge

03 Syntax Review


02 Live Demo



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 ☺


@tammybutowHTML5 Fantastic Forms For Mobile Web


HTML5 Fantastic Forms for Mobile Web

Technology

Transcript of HTML5 Fantastic Forms for Mobile Web