KEMBAR78
HTML5 Mullet: Forms & Input Validation | PPT
Todd Anglin
  @toddanglin
@t oddanglin

VP HTML5 Web & Mobile Tools, Telerik
Microsoft MVP, ASP Insider, O'Reilly Author

   htmlui.com
   @htmlui
HTML5 forms & input:
learning goals
•   what’s available?
•   how do you use it?
•   how do you customize the
    default experience?
•   how do you make it work in
    older browsers?
TODAY

HTML FORMS
asdflkajfds
Enter your email: <input type="text" />
<input type="submit" value="Submit" />
In HTML4…
•   Everything’s a text box
•   Lots of JavaScript
<input type="_________" />



 text               checkbox
 password           radio
 hidden             submit
 file               reset
                    image
                    button

HTML4
Wouldn't it be nice if…
•   Browsers understood different
    data types
•   Browsers tailored input
    methods to data types
•   Browsers could do basic
    validation
FORMS
•   New input types
•   New rendering
•   New input features
    – EX: Placeholder Text, AutoFocus



      Backwards compatible!
<input type="_________" />



 text               checkbox
 password           radio
 hidden             submit
 file               reset
                    image
                    button

HTML4
<input type="_________" />



text       url         checkbox
password   search      radio
hidden     color       submit
file       number      reset
email      range       image
tel        datetime*   button

HTML5
State of the Browsers
(Mid 2012)



 A      B    A+    B+   B-

 21    11   11.6    6   9
OS X
[No unique keyboard for Date/Time]

    Chrome for Android improves the story,
but only available to fraction of Android users.
DEMO:
NEW INPUT TYPES
"Can I customize browser
   rendered input elements
    (like calendar or range
            slider)?"
             Nope. Not yet. Not really.




     Shadow DOM
input[type=range].custom::-webkit-slider-thumb
DEMO:
CUSTOMIZING SHADOW
DOM
asdflkajfds
Enter your email:
<input type="email" placeholder="Enter
your email" required title="Please
enter your email" />
<input type="submit" value="Submit" />
New Attributes
•   More control over input
    behavior
    – Still no JavaScript
    – Improved usability
                        – NoValidate
•   Attributes:         – FormNoValidate
    – Placeholder
                        – Accept
    – Autofocus
                        – Multiple
    – Max Length
                        – Min/Max
    – List
                        – Step
    – AutoComplete
    – Required
    – Pattern
DEMO:
NEW INPUT ATTRIBUTES
Validation
•   Handled by browser
    – Can be disabled via form
      novalidate
•   Saves JavaScript
    – Less to download = faster loading
      apps

    Does not replace server-
        side validation
3 Ways to Control Validation
Customizing validation HTML
 •   Change message
     – In Chrome, use input title attribute
       (Not FF, O, S)
 •   Pattern attribute
JavaScri
Validation API                      pt


  •   JavaScript for greater control


checkValidity() setCustomValidity()
CSS Styling for Validation CSS


  New states:
    valid       in-range
    invalid     out-of-range
    required    ready-only
    optional    write-only
DEMO:
CUSTOMIZING VALIDATION
Lowest common denominator?
       Including IE9?


     NOTHING.
        :(
Older Browsers
1.   Polyfill
2.   JavaScript fallbacks
DEMO:
POLYFILLING HTML5 FORMS
Please remember to complete and
     return your session eval forms.




@toddanglin | anglin@telerik.com

THANKS!

                          www.KendoUI.com

HTML5 Mullet: Forms & Input Validation

Editor's Notes

  • #2 The HTML5 Mullet: Form Input and Validation Really, it ’s the HTML5 Reverse Mullet. Party in the front, business in the back. Most talk about HTML5 generally revolves around the fun and exciting technologies like Geolocation, Video, and the powerful styling CSS3 brings to the party. But how useful is HTML5 for business apps? HTML5 promises a number of new features in browsers that will make data entry and validation easier for developers and end-users. In this session, you will learn how HTML5 is helping business developers simplify working with data and input validation, and see practical techniques for leveraging these features across all browsers, old and new. You will learn: How to use HTML5 Forms and input validation Techniques for bridging the gap to older browsers that lack HTML5 How to customize the default browser HTML5 Forms experience
  • #3 Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #6 This HTML4 form would submit without hesitation, even though the input is clearly wrong. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #7 Configuration for basic input example Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #9 http://www.w3.org/TR/html4/interact/forms.html#adef-type-INPUT The &quot;state of the art&quot; for forms in HTML4 Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #13 http://www.w3.org/TR/html4/interact/forms.html#adef-type-INPUT Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #14 There are 13 new input types Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #16 Browsers ultimately dictate the usability of HTML5 forms. Great overview available here: http://wufoo.com/html5/ This non-specific rating focuses on Desktop Browsers. Mobile browsers are a different story. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #17 Most new types still render as a normal textbox Shown: IE9, FF11 LIVE TEST: http://jsbin.com/imonat Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #18 Chrome 21 (Mac) Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #19 Not only do renderings differ by browser, but by client Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #20 iOS varies the keyboard significantly on the iPhone depending on the input type Shown: iOS5 (not available in iOS4) Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #24 Android (4.0) also provides unique keyboards, but support is not nearly as extensive for HTML5 input types as iOS Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #26 Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ Example: input[type=range].custom::-webkit-slider-thumb { -webkit-appearance: none; background-color: Green; opacity: 0.5; width: 10px; height: 40px; } Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #33 Validation helps improve user experience. Fewer trips to the server if you can catch simple user mistakes on the client.
  • #35 By default, browser use RFC-compliant email validation Some types, like Telephone intentionally do not validate format http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message http://jsfiddle.net/nfgfP/61/
  • #37 http://www.alistapart.com/articles/forward-thinking-form-validation/
  • #39 The common set of HTML5 Form features that work in all modern HTML5 browsers *Note that IE9 offers no HTML5 forms support Types Email, Tel, Url, Search, Number Attributes Placeholder, MaxLength, NoValidate, Autofocus Elements Output Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #40 Sad truth is that HTML5 forms support across all browsers is evolving slowly. BUT…that doesn&apos;t mean this is all for waste. We can use a couple of solutions to take advantage of new HTML5 forms syntax. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #41 HTML5 Forms polyfill: https://github.com/ryanseddon/H5F OR Polyfill approach also gives you more control over rendering in browsers. Makes it useful in modern browsers, too.
  • #43 Baby Steps - HTML5 Forms support is not perfect today, but it is headed in the right direction Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • #44 Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.