Cross-Browser HTML5 Forms

Going down the rabbit hole with new shiny features.

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

Transcript

1. Cross-browser HTML5 Forms without repeating repeating yourself Stu Cox stuart.cox@gmail.com
2. 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
3. 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
4. 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() ...
5. <> 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>
6. Browser Widgets <input type="datetime">
7. • Differ between browsers Maybe not a problem? • Lack of customisation Date/time formats Styling • Sparse support Graceful fallback, but not very usable Browser Widgets
8. • 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
9. ☐ Semantic markup ☐ Customisable, styleable widgets ☐ Touch-friendly mobile widgets ☐ Datetime widget ☐ Customisable, styleable validation messages ☐ DRY validation logic All I want for Christmas
10. 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
11. ☑ 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