Skip to main content

A Python module that adds HTML5 widgets to WTForms.

Project description

This modul adds HTML5 widgets to WTForms.

It supports the new INPUT types for fields and also sets some of the new INPUT attributes automatically (based on widget type and what kind of validators are set for the field).

There are widgets for all the new INPUT types, that you can use in your own fields and also field classes ready to use. Along with some validators that take advantage of the new attributes.

Use it just like WTForms. The only difference is, that you import the fields from wtforms_html5 instead.


First import the needed modules…

>>> from wtforms import Form
>>> from wtforms.validators import Length, NumberRange, DataRequired
>>> from wtforms_html5 import TextField, IntegerField, DateField
>>> from wtforms_html5 import DateRange

And some extra stuff for our examples (nomally not needed)

>>> from datetime import date
>>> from werkzeug.utils import MultiDict

Then comes the main part: declare your form. This works just like vanilla WTForms, just use the fields you imported from wtforms_html5 instead…

>>> class TestForm(Form):
...  name = TextField('Name', validators=[DataRequired(), Length(5, 25)])
...  number = IntegerField('Number', validators=[NumberRange(1000, 9999)], description='Some stuff...')
...  date = DateField('Date:', validators=[DateRange(date(2000,1,1), date(2012,4,20))])

Now let’s see, how the generated input fields look like… the min, max, required and title attributes where auto-generated from the declaration.

>>> f = TestForm()
u'<input id="name" max="25" min="5" name="name" required="required" type="text" value="">'
>>> f.number()
u'<input id="number" max="9999" min="1000" name="number" title="Some stuff..." type="number" value="">'
u'<input id="date" max="2012-04-20" min="2000-01-01" name="date" type="date" value="">'

And finally some quick tests for DateRange and the setting of the invalid class on error…

>>> d = MultiDict({'name':'Testor', 'date':'1995-05-01'})
>>> f.process(d)  # enter the data to the form
>>> f.validate()  # and check for errors...
>>> f.errors
{'date': ['Date must be >= 2000-01-01.'], 'number': [u'Number must be between 1000 and 9999.']}
>>> f.number()
u'<input class="invalid" id="number" max="9999" min="1000" name="number" title="Some stuff..." type="number" value="">'


You can install WTForms HTML5 Widgets with pip or from source.

Install with pip

pip is “a tool for installing and managing Python packages”. If you don’t have it installed, see the pip install instructions.

pip install wtforms-html5

Install from source

You can fetch the latest sourceball from github and unpack it, or just clone this repository: git clone git:// If you got the source, change into the directory and use

python install

Since WTForms HTML5 Widgets only adds functionallity to WTForms, you need to have WTForms installed too. But if you use the installation methods described above, it should have been taken care of.


Supported INPUT types

  • TextField
  • SearchField
  • URLField
  • EmailField
  • TelField
  • IntegerField
  • IntegerRangeField
  • DecimalField
  • DecimalRangeField
  • FloatField
  • FloatRangeField
  • DateField

Supported auto-attributes

  • title

    If no title attribute is provided for a field, but a description, the description is used for the title.

  • required

    Is set if the field has the required flag set.

    This happens if you use one of these validators: DataRequired or InputRequired. Or DataNotNone from this modul. You can set just the flag without any validator logic with the Required validator from this modul.

  • min and max

    If either Length, NumberRange or DateRange is used as a validator and sets a minimal or maximal value, the corresponding INPUT attribute is set.

  • invalid

    If the field got any validation errors, the css class invalid gets set.

New validators

  • Required

    The Required validator from wtforms is an old alias for DataRequired. It is deprecated and will be removed in 1.2. The Required validator from this modul just sets the required flag, without any validator logic.

  • DataNotNone

    Works like the original DataRequired but only raises an Error if the data is None, so that False or 0 are accepted values.

  • DateRange

    Allows the use of min and max limits for date fields.

Testing and Contribution

WTForms HTML5 Widgets is at home at:

If you find any bugs, issues or anything, please use the issue tracker.


There are some doctest in the module. You can either run them from the source directory like this python -v or, if you got this modul already installed, like this python -m doctest -v wtforms_html5.

If you want to run the test cases, see that you got nose installed. You can install it like this: pip install nose. Now either run nosetests from the source directory or, if you got this modul already installed, run them like this: nosetest test_wtforms_html5.

If something fails, please get in touch.

Project details

Release history Release notifications

History Node


This version
History Node


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
wtforms-html5-0.1.3.tar.gz (22.4 kB) Copy SHA256 hash SHA256 Source None Nov 12, 2012

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page