HTML5 and Django Form Inputs

Posted by Bryan in Web Development

html5I recently went through the fairly painless of process of upgrading thepiepers.net to html5. This will allow me more flexibility in the future as more browsers expand their support for html5. In addition, html5 has a number of improvements over html4 that will make my front-end work a little easier.

In the process of upgrading the site, I implemented the following

  1. Internet Explorer overrides for html5 elements
  2. Fixed display issues for non-html5 elements
  3. Implemented Django html5 form inputs

With any front-end update to your site, there is always the Internet Explorer factor. All of the new html5 element styles will be ignored by default. To get around this, you can use a drop-in script like the html5shiv. It basically enables the CSS processing for all of the new html5 elements.

For all of the other browsers that do not support html5, the unknown elements will render inline { display: inline; }. This will cause you a few headaches as most of the new html5 elements are block elements. To fix this, reset the display property for the html5 elements as shown below:

<style type="text/css">
    article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
</style>

Finally, the Django form inputs do not support the new input types like “email”, “tel” and “url”, just to name a few. A quick override is to subclass the Django Input widget and change the input_type:

from django.forms.widgets import Input
from django import forms 

 

class Html5EmailInput(Input):
    input_type = 'email'

 

class Html5URLInput(Input):
    input_type = 'url'

...

 

class Html5Form(forms.Form):
    email = forms.CharField(widget=Html5EmailInput())
    url = forms.CharField(widget=Html5URLInput())

...

You will get great mileage out of these input types on mobile devices like the iPhone and iPad.

Once you have these workarounds in place, you will be well on your way to taking advantage of the new features in html5.

Update: Modernizr is a great library to bolt on for html5-feature detection. It supports both configurable CSS and JS routines.