Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Forms in HTML5 - Brisbane Web Design April 2011

A look at the new form functionality in HTML5 and how you can make use of it now.

Bruce Morrison

on 20 April 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Forms in HTML5 - Brisbane Web Design April 2011

HTML5, Doctypes, and how browsers work
Whats new for forms in HTML5? Using HTML5 form features now doctypes Define the flavor of HTML the page uses. HTML, XHTML, Strict, transitional... Browsers don’t care...well almost More to do with CSS than the HTML HTML5 doctype is the shortest string to put modern browsers into standards mode. http://www.quirksmode.org/css/quirksmode.html
http://diveintohtml5.org/semantics.html#the-doctype <!DOCTYPE html> HTML5 Standard is backwards compatable.

Add HTML5 doctype to any recent website and it will work fine & validate. HTML5 Standard? The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. This approach differs from previous versions of HTML, where the final specification would typically be approved by a committee before being actually implemented. The goal of this change is to ensure that the specification is implementable, and usable by authors once it is finished. If you are going to wait for the HTML5 standard to be “complete” before using it you could be waiting quite a while. HTML5 Compatible browsers? Which browsers are HTML5 compatible? Depends! Not a yes, no answer.
More a question of “how much”? Browsers implement parts of the standard (have been for a while) Each new browsers version will have more of the standard implemented http://html5test.com/ What do browsers do with elements and attributes they don’t recognise? Attributes are ignored Elements - depends on the browser - most browsers add them to the DOM (treating them as inline elements) but IE < 9 sees them as errors and skips them. Using HTML5 semantic elements today

HTML5: Right Here, Right Now, by Tantek Çelik (Video, Slides) Placeholder text <input name="q" placeholder="Search Bookmarks and History"> Displayed in a text input when the input is empty and not focused
Placeholder text disappears when clicked on or tabbed to
Can only contain text (no HTML)
Some browsers allow styling of placeholder text Autofocus <input name="q" autofocus> Sets input focus to the specified input field
Use javascript to emulate in browsers that do not support it. New field types email
datetime-local <input type="text"> <input type="email" multiple> <input type="url"> <input type="number" min="0" max="100" step="5"> <input type="range" min="0" max="100" step="5"> <input type="tel"> <input type="search"> <input type="color"> Most browsers treat this as a text field
"multiple "attribute allows for multiple addresses
Opera & Chrome add a small warning icon that disappears when a valid email address is entered
iPhone presents a keyboard optimised for entering email addresses
Use Now* Browsers treat this field as a text field
iPhone presents a keyboard optimised for entering web addresses
Use Now* For phone numbers
Some browsers strip whitespace
Use now For site search fields
Most browsers present as a standard text field
Safari and some versions of Chorme will display with rounder corners (this can be overridden in CSS) and when you type text an “x” appears that allows clearing of the field.
Use now but check presentation especially in webkit browsers Display a color picker
Only in Opera FF4
Wait until there is greater support. Commonly presented as a text field with a spinner
iPhone presents a keyboard optimised for numeric input
Use if happy with presentation Like number but presented as a slider in Safari, Chrome, and Opera
Others present as a text box
iPhone treats as text
Use if happy with presentation <input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local"> Opera has good support Validation Typically client side validation is achieved with JavaScript.

By using the email, url, number fields the browser knows the expected format of the input and can validate it.

No more JavaScript validation!* Attributes novalidate Validation is on by default.
Use the novalidate attribute on the form element to disable all validation.
Support in FF4, Opera & Chrome formnovalidate <input type="submit" formnovalidate
value="Submit without validation" > <form novalidate> Used on submit buttons to indication the form should not be validated
Support in FF4, Opera & Chrome http://wufoo.com/html5/#types required Attribute that indicates that the form input is required.
Must have a name attribute
Browsers that support will halt submission and notify the user.
Can override error messages using JavaScript <input type=text required name="username"> pattern Allows the input field to be validated against a regular experssion
Regular expressions can be quite complex
e.g. [A-z]{3} = 3 upper or lower case letters
Implies validation.
Must have a name attribute.
Support in FF4 & Opera <input type=text name="product_id"
pattern="[A-Z]+-[0-9]+"> http://wufoo.com/html5/#attributes CSS and HTML5 Forms CSS3 has a number of new pseudo classes that can select form elements that are in particular states:

:required { }
:optional { }
:valid { }
:invalid { }
:default { }
:in-range { }
:out-of-range { } Can you use these features now? Modernizer Small javascript library (3.7kb compressed, 41kb uncompressed)
Doesn’t “sniff” browser type
Does feature checking to detect is a browser supports a particular feature.
Creates a JavaScrpt object (named Modernizr) that contains the results of these tests as boolean properties;
It adds classes to the html element that explain precisely what features are and are not supported
This can be used to provide an alternative for browsers that do not support a particular feature. There are a number of tutorials that use the Modernizer library to detect support for the new features and utilise JavaScript to to simulate the native HTML5 behaviours. http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/
http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/ Bruce Morrison
@brucemorrison <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Full transcript