Cross-browser HTML5 Forms without repeating repeating yourself Stu Cox [email protected] 

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 

EmailField() ↳ DateTimeField() ↳ IntegerField(max_value=5) ↳ CharField(max_length=100, required=True) ↳ Django libraries: criteria 

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() ... 

<> Markup {% for field in form %} {{ field.label }}: {{ field }} {% endfor %} Start: ... 

Browser Widgets 

● Differ between browsers Maybe not a problem? ● Lack of customisation Date/time formats Styling ● Sparse support Graceful fallback, but not very usable Browser Widgets 

● 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 

☐ Semantic markup ☐ Customisable, styleable widgets ☐ Touch-friendly mobile widgets ☐ Datetime widget ☐ Customisable, styleable validation messages ☐ DRY validation logic All I want for Christmas 

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 

☑ 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