EmailInput HTML5 friendly for Django

02 August 2011   6 comments   Django

Mind That Age!

This blog post is 7 years old! Most likely, its content is outdated. Especially if it's technical.

Powered by Fusion×

Suppose you have a Django app with a login where people can only log in with their email address. Then use this widget on your login form:

## The input widget class
class EmailInput(forms.widgets.Input):
   input_type = 'email'

   def render(self, name, value, attrs=None):
       if attrs is None:
           attrs = {}
       return super(EmailInput, self).render(name, value, attrs=attrs)

## Example usage
class AuthenticationForm(django.contrib.auth.forms.AuthenticationForm):
   """override the authentication form because we use the email address as the
   key to authentication."""
   # allows for using email to log in
   username = forms.CharField(label="Username", max_length=75,
   rememberme = forms.BooleanField(label="Remember me", required=False)

EmailInput HTML5 friendly for Django This input field does some cool stuff in the browser such as automatic validation in the browser as seen in this screenshot here.

More importantly it fixes a very annoying problem when surfing on a smartphone or a tablet like the iPad. As I'm about to type "" it first wants to start capitalized and which might fail the login. Also if the email address contains a word that it wants to correct like ("mozilla" -> "Mozilla") you have to click the little correct tooltip to tell the input is correct in verbatim.

Note to Djangonauts who want to use this and have a dual authentication backend that takes both usernames and email addresses, this form will make it impossible to log in as something called "admin" for example.


Lucio Correa

Kudos for the code, but the example is wrong: it should be:

EmailInput instead of forms.widget.Input, no?
Peter Bengtsson
Thank you so much for the correction! Fixed now.
Aamir Maniar

This is a nice one, why don't you start writing library of all Html5 friendly input controls? That would be good...

Please check out this project : django-floppy-forms
there's an ongoing effort to bring this to django core
Peter Bengtsson
I'm keeping a eye on that exciting project.
S├ębastien Fievet
@Aamir check also django-html5 :
Thank you for posting a comment

Your email will never ever be published

Related posts

A blog comment spam solution: Retalition! 31 July 2011
Title - a javascript snippet to control the document title 22 August 2011
Related by Keyword:
django-html-validator 20 October 2014
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
Going real simple on HTML5 audio 14 October 2011
A script tag's type in HTML5 10 May 2011
RequireJS versus HeadJS 09 January 2011
Related by Text:
How to "onchange" in ReactJS 21 October 2015
AJAX accelerated web widgets 23 June 2005
What stumped me about AngularJS 12 May 2013
A taste of the Django on inside Mozilla, Sheriffs Duty 22 July 2011
Integrate BrowserID in a Tornado web app 22 November 2011