How to render my TextArea with WTForms?
Asked Answered
T

4

33

To render my textareafield with a specified number of columns and rows with WTForms, how do I set the number of columns and rows? I followed the instructions from this question but it didn't work:

How to specify rows and columns of a <textarea > tag using wtforms

I tried adding a widget but it didn't work:

class AForm(Form):
    name = TextField('Name', [validators.Length(min=4)])
    title = TextField('Title', [validators.Length(min=4)])
    text = TextAreaField('Text', widget=TextArea(row=70, cols=11))
    phonenumber = TextField('Phone number')
    phonenumberhide = BooleanField('Display phone number on site')
    price = TextField('Price')
    password = PasswordField('Password')
    email = TextField('Email', [
        validators.Length(min=6, message=_('Little short for an email address?')),
        validators.Email(message=_('That\'s not a valid email address.'))
    ])

TypeError: object.new() takes no parameters

Tyrannous answered 2/11, 2011 at 11:25 Comment(1)
{{form.text(cols="35", rows="20")|safe}} is workingTyrannous
A
61

Very old question, but since the WTF-Form documentation isn't clear I'm posting my working example. OP, hope you are not still working on this. :-)

form

from flask_wtf import Form
from wtforms.fields import StringField
from wtforms.widgets import TextArea

class PostForm(Form):
    title = StringField(u'title', validators=[DataRequired()])
    body = StringField(u'Text', widget=TextArea())

template

{% extends "base.html" %}
{% block title %}Create Post{% endblock %}
{% block content %}
<H3>Create/Edit Post</H3>
<form action="" method=post>
   {{form.hidden_tag()}}
   <dl>
      <dt>Title:
      <dd>{{ form.title }}
      <dt>Post:
      <dd>{{ form.body(cols="35", rows="20") }}}
   </dl>
   <p>
      <input type=submit value="Publish">
</form>
{% endblock %}
Arria answered 23/4, 2014 at 22:46 Comment(1)
with the new version of wtforms you can import TextAreaField directly: from wtforms import TextAreaFieldLath
A
45

There is no need to update the template for this issue. You can set the rows and cols in the definition of TextAreaField. Here is the sample: \

class AForm(Form):
     text = TextAreaField('Text', render_kw={"rows": 70, "cols": 11})

For render_kw, if provided, a dictionary which provides default keywords will be given to the widget at render time.

Agency answered 8/9, 2016 at 7:34 Comment(2)
I tried above answers. Yours is the best and easiest one. Thank you!Endemic
Thank you! Exactly what I needed! In addition, you could also pass in 'class_': 'some_default_css_class' into render_kw={...} if you wanted to specify a default styling. This default styling could then if desired be overwritten by doing what @Jay proposed, by doing this in your template: {{ form.fieldname(class_='some_override_css_class')}}Bayern
C
22

TextArea field can be also implemented without any widgets:

forms.py

from wtforms import Form, TextField, TextAreaField

class ContactForm(Form):
    name = TextField('Name')
    email = TextField('Email Address')
    body = TextAreaField('Message Body')

template.html

... 
    <form method="POST" action="">
        {{ form.csrf_token }}
        {{ form.name.label }} {{ form.name(size=30) }} <br/>
        {{ form.email.label }} {{ form.email(size=30) }} <br/>
        {{ form.body.label }} {{ form.body(cols="35", rows="20") }} <br/>
        <input type="submit" value="Submit"/>
    </form>
...
Characharabanc answered 30/10, 2015 at 20:4 Comment(0)
B
1

I want to add here that the solutions above which suggest to use render_kw indeed works UNDER THE CONDITION that height for the text area IS NOT set.

so if you have a field:

    temp = TextAreaField('temp', render_kw={'rows':20})

and in your HTML file you write:

    {{ form.temp(class_='someclass' )}}

then in the CSS definition of someclass, height should not be set as this will conflict with your rows settings and apparently height has precedence above rows.

Brasca answered 23/4, 2019 at 14:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.