Skip to content

Instantly share code, notes, and snippets.

@wgwz
Forked from doobeh/wtf.txt
Created January 22, 2016 15:34
Show Gist options
  • Save wgwz/466672676704045c7db4 to your computer and use it in GitHub Desktop.
Save wgwz/466672676704045c7db4 to your computer and use it in GitHub Desktop.
Persuading WTForms to Generate Checkboxes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
WTForms takes the pain out of handling forms and validation, you define your form,
tell it what validation checks the data needs to pass, then WTForms uses it's
widgets to generate the html.
A common problem you'll face is "Multiple select fields suck, they are confusing--
how can I show the user a nice list of checkboxes instead?"
The answer is to tell WTForms to use a different widgets to render it's html. Lets
first show how we'd render a simple SelectMultipleField form:
from flask import Flask, render_template_string
from wtforms import SelectMultipleField, Form
app = Flask(__name__)
data = [('value_a','Value A'), ('value_b','Value B'), ('value_c','Value C')]
class ExampleForm(Form):
example = SelectMultipleField(
'Pick Things!',
choices=data
)
@app.route('/')
def home():
form = ExampleForm()
return render_template_string('<form>{{ form.example }}</form>',form=form)
if __name__ == '__main__':
app.run(debug=True)
Voila, we have a basic horrible to use multiple select field, now we just need to change
how WTForms renders that SelectMultipleField by telling it to use a couple of different
widgets to produce our checkboxes
from wtforms import widgets
class ExampleForm(Form):
example = SelectMultipleField(
'Pick Things!',
choices=data,
option_widget=widgets.CheckboxInput(),
widget=widgets.ListWidget(prefix_label=False)
)
And that's it-- you'll be rendering check boxes for each of the sets of data, congratulations!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment