HTML5 Web Forms

Web Forms 2.0
New form elements & Attributes in HTML5
Estelle Weyl
www.Standardista.com@estellevw

HTML 4 <Input> Types
button
checkbox
file
hidden
image
password
radio
reset
submit
text
<input type="…

<Input> Types New in HTML5
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

<Input> Attributes in HTML4
name
disabled*
type
maxlength
readonly
size
value
alt
src
height
width
checked*
align
* CSS pseudoclasses

New <Input> Attributes in HTML5
form
readonly
autocomplete
autofocus
list
pattern
required
placeholder
multiple
list
min
max
step
formaction
formenctype
formmethod
formtarget
formnovalidate

Other Form Elements
New
<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>
<input id="inputID" name="inputName" placeholder="placeholder text" pattern="w{6,9}" required
autofocus type="text" />
</p>
http://standardista.com/webkit/ch4/input.html

Placeholder Attribute
<p>
</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>
</p>

Required Attribute
<p>
</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-write
input[type=checkbox]
input[required]
input:not([required])

Autofocus Attribute
<p>
</p>

Type Attribute
<p>
</p>

HTML 4 <Input> Types
button-
checkbox.
file*
hidden
image.
password.
radio
reset-
submit
text

13 New <Input> Types in HTML5
color
url
tel
email
number
range
search
date
datetime
datetime-local
month
time
week

color
<input type="color" …>

Color on Blackberry
Color: <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 type="url" …>

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

Datalist

<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

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

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 Addresses
http://standardista.com/webkit/ch4/email.html

Number
<input name="n" type="number"/>
min
max
step
http://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 />
safari

<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 unicorns

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> Types
date 2010-08-26
datetime 2010-08-26 19:00
datetime-local 2010-08-26 19:00
month 2010-08
time 19:00
week 2010-W34

Date Time <Input> Types
date http://www.standardista.com/webkit/ch4/date.html
datetimehttp://www.standardista.com/webkit/ch4/datetime.html
datetime-localhttp://www.standardista.com/webkit/ch4/datetime-loca.html
month http://www.standardista.com/webkit/ch4/month.html
Timehttp://www.standardista.com/webkit/ch4/time.html
weekhttp://www.standardista.com/webkit/ch4/month.html

Other Attributes
Form
Autofocus
Autocomplete

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

Test Everything
http://standardista.com/sandbox/html5formelements.html

Thanks
@estellevw
http://www.standardista.com
http://evotech.net/blog

Credits
Ma1974http://www.flickr.com/photos/ma1974/358477814/
Cornifyhttp://cornify.com

http://www.standardista.com	1995
http://biscminds.blogspot.com	372
http://www.biscminds.blogspot.com	19
url_unknown	8
http://localhost	2
http://webcache.googleusercontent.com	2
http://biscminds.blogspot.com.es	2
http://biscminds.blogspot.com.au	1
http://translate.googleusercontent.com	1

HTML5 Web Forms

by Estelle Weyl on Aug 26, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 2,402

Statistics

HTML5 Web Forms — Presentation Transcript