HTML5Web forms & microdata      Akiva Levy, SixThirteen    http://sixthirteendesign.com                  2011.03.27 Tel Av...
Web forms
Input Types
Input type: email            <input type="email" />•   Falls back to type="text" for browsers currently lacking    support...
Input type: URL               <input type="url" />•   Falls back to type="text" for browsers currently lacking    support•...
Input type: search           <input type="search" />•   Falls back to type="text" for browsers currently lacking    suppor...
Input type: search          <input type="search" />             Matching native Mac Safari UIIncludes the native one-click...
Input type: COLOR             <input type="color" />•   Falls back to type="text" for browsers currently lacking    suppor...
Input type: COLOR<input type="color" />
Input type: NUMBER          <input type="number" />•   Optional attributes include: min, max, step, and value•   Falls bac...
Input type: NUMBER            <input type="number" />•   Offers additional Javascript methods:    •   input.stepUp(n)    •...
Input type: Range            <input type="range" />•   Works much the same as the new number input type•   Vendors are exp...
Input type: Range            <input type="range" />•   However, iPhone does not display range as a slider•   Nor does it s...
Other new bits
Placeholder       <input placeholder="Enter e-mail address" />•   Allows for a DOM-specific way to populate an input    fi...
AUTOfocus               <input autofocus />•   Allows for a DOM-specific way to automatically focus    on a particular inp...
validation•   Aims to replace the need for client-side validation•   Works for types: url, email, and number•   Enabled by...
Validation       Example e-mail validationExample number with max value validation
Required                <input required />•   Ties into validation, as simple as adding required
Examplecontact form
Microdata
Microdata•   Offers a means to add semantic context to your markup•   Alternative to RDFa, Microformats, etc.•   Extensibl...
Microdata: Why care?•   Allowing your markup to be easily digestible by    machines means your content can be extrapolated...
MICRODATA: How?•   Create meaningful context using scoped name/value    pairs•   Choose (or define) a vocabulary appropria...
MICRODATA: How?       Loading…                             o                            __|__                           /_...
Recommended linksRead         http://html5doctor.com Test         http://modernizr.comReview   http://foolip.org/microdata...
</presentation>
<standingOvation />
Thanks! Akiva Levy, founder of SixThirteen   Developer, Designer, Advocate         HTTP://SIXTHIRTEENDESIGN.CO WWW        ...
HTML5 Web forms & microdata - Akiva Levi
HTML5 Web forms & microdata - Akiva Levi
HTML5 Web forms & microdata - Akiva Levi
HTML5 Web forms & microdata - Akiva Levi
HTML5 Web forms & microdata - Akiva Levi
Upcoming SlideShare
Loading in …5
×

HTML5 Web forms & microdata - Akiva Levi

2,019 views

Published on

  • Be the first to comment

  • Be the first to like this

HTML5 Web forms & microdata - Akiva Levi

  1. 1. HTML5Web forms & microdata Akiva Levy, SixThirteen http://sixthirteendesign.com 2011.03.27 Tel Aviv, Israel
  2. 2. Web forms
  3. 3. Input Types
  4. 4. Input type: email <input type="email" />• Falls back to type="text" for browsers currently lacking support• iPhone’s mobile Safari will switch to the numeric keyboard type
  5. 5. Input type: URL <input type="url" />• Falls back to type="text" for browsers currently lacking support• iPhone’s mobile Safari will use the URI keyboard input type
  6. 6. Input type: search <input type="search" />• Falls back to type="text" for browsers currently lacking support• Vendors style this element to match their browser’s native UI• Currently only supported by Mac OS X Safari
  7. 7. Input type: search <input type="search" /> Matching native Mac Safari UIIncludes the native one-click clear button within element
  8. 8. Input type: COLOR <input type="color" />• Falls back to type="text" for browsers currently lacking support• Utilizes the native OS colour picker widget• Returns a six digit hexidecimal colour value (ie. 27272a)• Currently only supported by Opera 11
  9. 9. Input type: COLOR<input type="color" />
  10. 10. Input type: NUMBER <input type="number" />• Optional attributes include: min, max, step, and value• Falls back to type="text" for browsers currently lacking support• Styling is dependent upon Vendor implementation• Activates iPhone’s on-screen keyboard to numeric type• Desktop Opera implements a “spin box”
  11. 11. Input type: NUMBER <input type="number" />• Offers additional Javascript methods: • input.stepUp(n) • input.stepDown(n) • input.valueAsNumber
  12. 12. Input type: Range <input type="range" />• Works much the same as the new number input type• Vendors are expected to display as a horizontal slider
  13. 13. Input type: Range <input type="range" />• However, iPhone does not display range as a slider• Nor does it select the numeric keyboard type• iPhone simply falls back to the text type…
  14. 14. Other new bits
  15. 15. Placeholder <input placeholder="Enter e-mail address" />• Allows for a DOM-specific way to populate an input field with placeholder text, usually instructing the user as to the expected action they should perform• Aims to remove the need for Javascript hacks to manage this
  16. 16. AUTOfocus <input autofocus />• Allows for a DOM-specific way to automatically focus on a particular input field• Aims to remove the need for Javascript hacks to manage this• Solves usability problems by allowing this feature to be enabled or disabled as a preference within the browser• Power users everywhere rejoice!
  17. 17. validation• Aims to replace the need for client-side validation• Works for types: url, email, and number• Enabled by default in browsers that support it• To explicitly disable this feature use: <form novalidate>• Some current implementations are incomplete and do not offer any visual feedback when validation fails, leaving users guessing why the form did not submit
  18. 18. Validation Example e-mail validationExample number with max value validation
  19. 19. Required <input required />• Ties into validation, as simple as adding required
  20. 20. Examplecontact form
  21. 21. Microdata
  22. 22. Microdata• Offers a means to add semantic context to your markup• Alternative to RDFa, Microformats, etc.• Extensible and definable• Machine-readable data allows for easily digestible meaning to markup, allowing for richer context of content
  23. 23. Microdata: Why care?• Allowing your markup to be easily digestible by machines means your content can be extrapolated in meaningful ways• Microdata allows you to implement semantics easily• Microdata allows machines to understand the context of your site easily• Microdata = win / win
  24. 24. MICRODATA: How?• Create meaningful context using scoped name/value pairs• Choose (or define) a vocabulary appropriate for your content and declare using itemscope and itemtype="" in the parent node• For each piece of data you wish to annotate, use o __|__ itemprop="" /_____ ____[ - - /]____ / # _____/ /# / / # _.---._/ #/ / /| | | /| Let’s see an example… /___/ | | | | | | ___• | | | | |---| | | | | |__| _| |___| |_/ |__| // < ___ /> // ||/ | | | | ||/ | | | | |---| |---| |---| |---| | | | | |___| |___| / /
  25. 25. MICRODATA: How? Loading… o __|__ /_____ ____[ O O /]____ / # _____/ /# / / # _.---._/ #/ / /| | | /| /___/ | | | | | | ___ | | | | |---| | | | | |__| _| |___| |_/ |__| // < ___ /> // ||/ | | | | ||/ | | | | |---| |---| |---| |---| | | | | |___| |___| / /
  26. 26. Recommended linksRead http://html5doctor.com Test http://modernizr.comReview http://foolip.org/microdatajs/live
  27. 27. </presentation>
  28. 28. <standingOvation />
  29. 29. Thanks! Akiva Levy, founder of SixThirteen Developer, Designer, Advocate HTTP://SIXTHIRTEENDESIGN.CO WWW M INFO@SIXTHIRTEENDESIGN.COE-MAIL MTWITTER @AKIVALEVY @SIXTHIRTEENCO

×