WTForms support for input readonly attribute?

Question

Here they say it's not supported out of the box.

Do you know a way to make HTML input form fields use the 'readonly' attribute with WTForms?

Stipulation

Answer 1

The solution is using render_kw in form field declaration.

my_field = fields.StringField('Label', render_kw={'readonly': True})

Khajeh

And, if you want to access it from Jinja2, you can do: {% if form.my_field.render_kw.readonly } readonly blabla {% endif %} – Grandsire

perfect! this allows me to declare it in my forms.py and then render the form with Bootstrap. – Salientian

Especially like this: getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text – Murmurous

Answer 2

I assume you are talking about the <input readonly> attribute in HTML/XHTML, which is not what that discussion thread you linked is about. (the linked thread is about a lower-level issue with how to ignore passed form input)

The way to set a readonly attribute (and indeed any attribute on a field) is as a keyword-arg in your template. If using Jinja, this looks like (html5):

{{ form.myfield(readonly=true) }}

And for XHTML or versions of WTForms older than 0.6.3:

{{ form.myfield(readonly="readonly") }}

Just note that the 'readonly' attribute is only a hint to the browser, and it has no impact on what the user submits. This is to say, a malicious user (or someone using a browser with custom JS a la greasemonkey or a JS console or a DOM tree) could generate a POST request changing the value of a field regardless of whether the readonly attribute is set on the input tag.

For this reason, the readonly attribute is only useful as an option to modify the user experience (for example, disabling a field based on some event/action using JS) and the input coming from a 'readonly' field is no more trust-able than any other form input.

Kierkegaard

It seems a bit silly you can't pass these in as kwargs to the widget or something when you're declaring your form. – Succor

@Succor Actually, you can, certainly for StringFields although unfortunately not for BooleanFields, which at browser level is considered only a hint. Pass in render_kw={'readonly': True} at the wtforms level to have readonly applied, per the leading answer above. (Only adding this comment because yours got so many upticks). – Tuberous

Answer 3

https://wtforms-components.readthedocs.org/en/latest/#

from wtforms import Form, DateField, TextField
from wtforms_components import TimeField, read_only

class EventForm(Form):
    name = TextField('Name')
    start_date = DateField('Start date')
    start_time = TimeField('Start time')

    def __init__(self, *args, **kwargs):
        super(EventForm, self).__init__(*args, **kwargs)
        read_only(self.name)

Pickens

Answer 4

Another possibility is to use a hidden field, and then in your view, you can print out {{ form.field.data }} to display as text.

Piny

Answer 5

As of version 3.1 there is support for readonly and disabled fields.

from wtforms.validators import (
    Disabled,
    ReadOnly,
)


readonlyField = StringField("Readonly field", validators=[ReadOnly()])
disabledField = StringField("Disabled field", validators=[Disabled()])

The validators will both set the relevant HTML attributes and make sure that input from the form that is sent by the form is ignored.

Alliterate