How do I get Django forms to show the html required attribute?

Question

I have this form field:

email = forms.EmailField(
  required=True,
  max_length=100,
)

It has the required attribute, but in the html it is not adding the html attribute required. In fact it's not even using email as the field type, it's using text... though it appears to get max_length just fine.

Actual:

<input id="id_email" type="text" name="email" maxlength="100">

Expected:

<input id="id_email" type="email" name="email" maxlength="100" required="true">

How can I get Django to use the correct attributes in html forms?

Answer 1

Django form elements are written against <input /> as it exists in HTML 4, where type="text" was the correct option for e-mail addresses. There was also no required="true".

If you want custom HTML attributes, you need the attrs keyword argument to the widget. It would look something like this:

email = forms.EmailField(
    max_length=100,
    required=True,
    widget=forms.TextInput(attrs={ 'required': 'true' }),
)

You can check out more documentation about widgets here. Discussion of attrs is near the bottom of that page.

Regarding type="email", you might be able to send that to your attrs dictionary and Django will intelligently override its default. If that isn't the result you get, then your route is to subclass forms.TextInput and then pass it to the widget keyword argument.

Answer 2

Combining Daniel and Daniel answers, I usually use this mixin for my forms:

from django.contrib.admin.widgets import AdminFileWidget
from django.forms.widgets import HiddenInput, FileInput


class HTML5RequiredMixin(object):

    def __init__(self, *args, **kwargs):
        super(HTML5RequiredMixin, self).__init__(*args, **kwargs)
        for field in self.fields:
            if (self.fields[field].required and
               type(self.fields[field].widget) not in
                    (AdminFileWidget, HiddenInput, FileInput) and 
               '__prefix__' not in self.fields[field].widget.attrs):

                    self.fields[field].widget.attrs['required'] = 'required'
                    if self.fields[field].label:
                        self.fields[field].label += ' *'

So when i have to create a new form or modelform i just use:

class NewForm(HTML5RequiredMixin, forms.Form):
    ...