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

Question

Constructing a wtforms\' TextAreaField is something like this:

content = wtf.TextAreaField(\'Content\', id=\"content-area\", validators=[validators.Required()])
         


        

Answer 1

I was able to modify the rows and columns via the render_kw tag on the python forms page. When I first saw the definition of this on WTForm's website, I didn't know what it did until seeing other people's examples of using this to modify the class of the form element. So their definition just confused me until I started experimenting with it.

render_kw (dict) – If provided, a dictionary which provides default keywords that will be given to the widget at render time. - https://wtforms.readthedocs.io/en/stable/fields.html

I used this on my forms page.

current_templates_in_library = TextAreaField('current_templates_in_library', render_kw={'rows':'4'})

To add multiple tags and values, just separate them with a comma like this.

render_kw={'class':'myclass','rows':'4'}

Then this was rendered in the HTML. Notice the "rows" attribute there that was added.

<textarea class="form-control" id="current_templates_in_library" name="current_templates_in_library" rows="4" style="z-index: auto; position: relative; line-height: 20px; font-size: 14px; transition: none 0s ease 0s; background: transparent !important;">
rhel6
rhel7
win_2012r2
centos7
</textarea>

Answer 2

For convenience, add this macro first.

_formhelpers.html:

{% macro render_field(field) %}
  <dt>{{ field.label }}
  <dd>{{ field(**kwargs)|safe }}
  {% if field.errors %}
    <ul class=errors>
    {% for error in field.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  {% endif %}
  </dd>
{% endmacro %}

Import this macro and code in this way. it should work.

{% from "_formhelpers.html" import render_field %}
<form action="" method="post">
    {{ render_field(form.content,rows=100, cols=100) }}
</form>

Hope it helps !

Answer 3

There is a tutorial on Flask by nettuts+. Basically, it works like this:

from flask.ext import wtf

class ContactForm(wtf.Form):
    content = wtf.TextAreaField("Content", [validators.Required()])

and in your html:

<form action="" method="post">
    {{ form.content }}
</form>

Instead of specifying the layout in html, you can specify it in your css, for example:

form textarea#content {
     width: 100px;
     height: 100px;
     max-width: 100px;
}