Capturing User input using WTForms - tstorrnetnz/teaching2025 GitHub Wiki

Capturing User Input

Introduction

Almost all projects will need to get and use input from your users. This might be captured using a free text area, drop-down list, tick box, radio button etc. The type of data may be String, Integer, Time etc. In many cases it will be necessary to ensure:

  1. That the user fills in field/input
  2. The input is sensible (e.g. a age is a sensible number or a name is limited to less than say 30 characters)
  3. That any errors are picked up and a useful error message presented until the input is correct.

Error prevention is not only a great technique to help your users, it is also required for Merit/Excellence (along with testing it works properly etc)

WTForms

While it is possible to hand code input and error detection/correction from scratch, a much more efficient way to do this is using a Python Flask extension called WTForms. WTForms can handle data using the following input types:

Field Name Description
StringField A text input field that represents a single line input for string values
TextAreaField A multi-line text input field that represents a textarea for entering longer text values
PasswordField A text input field that is specifically designed for password inputs, hiding the input text with asterisks or dots
IntegerField A text input field that is designed for integer values, allowing only numeric input
DecimalField A text input field that is designed for decimal or floating-point values, allowing only numeric input with decimal point
BooleanField A checkbox input field that represents a boolean value, allowing the user to toggle between true and false
DateField A text input field that is designed for date values, allowing the user to input dates in a specific format
DateTimeField A text input field that is designed for datetime values, allowing the user to input datetime in a specific format
SelectField A dropdown menu input field that allows the user to select a single value from a predefined list of options
SelectMultipleField A multiple-choice input field that allows the user to select multiple values from a predefined list of options
FileField A file upload input field that allows the user to upload a file to the server
HiddenField A hidden input field that is not visible to the user, but can store data that needs to be submitted with the form
SubmitField A submit button input field that represents a button for submitting the form
FormField A nested form field that allows embedding one form within another form
FieldList A dynamic list of fields that allows the user to add or remove multiple instances of a specific field

As well as having a way to create error dialogs/messages.

FlaskForms1

A form created using WTForms.

FpMqj

Error message using WTForms.

How to get started using WTForms

You should plan on using WTForms from the start of your project. While it will be a little more time consuming than using the normal "simple" way of getting user input, the effort will very quickly pay off. Useful tutorial are listed below.

WTForms tutorials