HTML5 Web Forms

Web Forms 2.0New form elements & Attributes in HTML5Estelle Weylwww.Standardista.com@estellevw

HTML 4 <Input> Typesbuttoncheckboxfilehiddenimagepasswordradioresetsubmittext<input type="…

<Input> Types New in HTML5colordate datetimedatetime-local email month number range searchteltime urlweek

<Input> Attributes in HTML4 name disabled* type maxlengthreadonlysize value altsrc height width checked*align* CSS pseudoclasses

New <Input> Attributes in HTML5 formreadonlyautocomplete autofocus list pattern required placeholder multiple list min max stepformactionformenctypeformmethodformtargetformnovalidate

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

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

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

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

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

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"))

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

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

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

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

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

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

HTML 4 <Input> Typesbutton-checkbox.file*hiddenimage.password.radioreset-submittext

13 New <Input> Types in HTML5color urltelemailnumberrangesearch date datetimedatetime-localmonth timeweek

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

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

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

<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

<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

<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

Phone Numbers<input type="tel" …>

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

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

Email Addresseshttp://standardista.com/webkit/ch4/email.html

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

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

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

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

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

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

Date Time <Input> Typesdate 2010-08-26datetime 2010-08-26 19:00datetime-local 2010-08-26 19:00month 2010-08time 19:00week 2010-W34

Date Time <Input> Typesdate http://www.standardista.com/webkit/ch4/date.htmldatetimehttp://www.standardista.com/webkit/ch4/datetime.htmldatetime-localhttp://www.standardista.com/webkit/ch4/datetime-loca.htmlmonth http://www.standardista.com/webkit/ch4/month.htmlTimehttp://www.standardista.com/webkit/ch4/time.htmlweekhttp://www.standardista.com/webkit/ch4/month.html

Other AttributesFormAutofocusAutocomplete

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

Test Everythinghttp://standardista.com/sandbox/html5formelements.html

Thanks@estellevwhttp://www.standardista.comhttp://evotech.net/blog

CreditsMa1974http://www.flickr.com/photos/ma1974/358477814/Cornifyhttp://cornify.com

HTML5 Web Forms

More Related Content

What's hot

Viewers also liked

Similar to HTML5 Web Forms

Recently uploaded

HTML5 Web Forms

Editor's Notes