How to add an attribute that contains a hyphen to a WTForms field

Question

Calling a WTForms field object produces the rendered field, and any arguments are taken as attributes, for instance.

form.field(attribute='value')

would return something like

<input attribute='value'>

How can I add HTML5 custom data attributes such as data-provide which contain hyphens, making them unparseable in python as a single keyword argument?

Damicke

Answer 1

Create a dictionary with the corresponding key-value pairs and use ** to pass it to the field call:

attrs = {'data-provide': "foo"}
form.field(**attrs)

Edit: Looks like the comment by @NiklasB should be part of the answer: For those using flask with flask-WTF, use: {{ form.field( **{'data-provide': 'foo'} ) }} in your template.

Leatri

For those using flask with flask-WTF, use: {{ form.field( **{'data-provide': 'foo'} ) }} in your template – Moonseed

Thanks for this -- awesome work. I did the following: {{ form.phone( **{'data-format': '(ddd) ddd-dddd', 'class':'form-control bfh-phone', 'placeholder':'Phone'} ) }} – Bringhurst

Its works, but why is this working only when we create and unpack the dictionary and not working when we directly provide the parameters? – Channa

Answer 2

It's not necessary to use a dictionary like that in the form.field function call. The ** unpacks the dictionary items into named parameters for the function, so just add the parameters instead:

{{ form.field( data-provide='foo') }}

But do so AFTER any required parameters for that field. In other words, why unpack a dictionary right there when you can just add the parameters?

Ascription

This doesn't work because the wtforms parameters are Python syntax, and a property with a hyphen is not valid Python syntax. Doing this raises a TemplateSyntaxError. – Epistemic