Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Browser HTML5 Forms

Stu Cox
December 13, 2012

Cross-Browser HTML5 Forms

Going down the rabbit hole with new shiny features.

Presented at DBUG (https://groups.google.com/forum/?fromgroups#!forum/dbug)

Stu Cox

December 13, 2012
Tweet

More Decks by Stu Cox

Other Decks in Programming

Transcript

  1. What's new? • Input types email, tel, url, number, date,

    time, search, color... • Validation required, pattern • Accessibility / usability autofocus, accesskey, autocomplete, placeholder, datalist, spellcheck • Javascript APIs
  2. EmailField() ↳ <input type="email"> DateTimeField() ↳ <input type="datetime"> IntegerField(max_value=5) ↳

    <input type="number" max="5" step="1"> CharField(max_length=100, required=True) ↳ <input type="text" max_length=100 required> Django libraries: criteria
  3. django-floppyforms.readthedocs.org • Moves markup to template snippets • Drop-in replacement

    for django.forms • Baked-in support for HTML5 Django-floppyforms from floppyforms import forms class EventForm(forms.Form): start = forms.DateTimeField() ...
  4. <> Markup <form action="{% url signup %}" method="post"> {% for

    field in form %} <label>{{ field.label }}:</label> {{ field }} {% endfor %} <input type="submit"> </form> <form action="/create/" method="post"> <label>Start:</label> <input type="datetime" name="start"> ... <input type="submit"> </form>
  5. • Differ between browsers Maybe not a problem? • Lack

    of customisation Date/time formats Styling • Sparse support Graceful fallback, but not very usable Browser Widgets
  6. • Nice-to-have Already validating on server Usability gain on mobile

    • Lack of customisation Error message wording, styling • Validation client/server split Usability confusion Duplicated logic Validation
  7. ☐ Semantic markup ☐ Customisable, styleable widgets ☐ Touch-friendly mobile

    widgets ☐ Datetime widget ☐ Customisable, styleable validation messages ☐ DRY validation logic All I want for Christmas
  8. scSplitDateTime github.com/stucox/scSplitDateTime • Client-side tool • Splits datetime field into

    date & time Webshim afarkas.github.com/webshim • Polyfills JS APIs & widgets (via jQuery UI) • Allows custom styling of validation messages • Custom widgets in all browsers option Library magic
  9. ☑ Semantic markup Django-floppyforms ☑ Customisable, styleable widgets Webshim +

    jQuery UI + Modernizr.touch ☐ Touch-friendly mobile widgets Modernizr.touch? ☑ Datetime widget scSplitDateTime ☑ Customisable, styleable validation messages Webshim ☐ DRY validation logic Share logic between client & server? All I want for Christmas