Learn

We’ve now covered the operation cycle of forms using FlaskWTF. Now let’s look at some additional form fields included in WTForms.

TextAreaField

The TextAreaField is a text field that supports multi-line input. The data returned from a TextAreaField instance is a string that may include more whitespace characters such as newlines or tabs.

#### Form class declaration my_text_area = TextAreaField("Text Area Label")
BooleanField

A checkbox element is created using the BooleanField object. The data returned from a BooleanField instance is either True or False.

#### Form class declaration my_checkbox = BooleanField("Checkbox Label")
RadioField

A radio button group is created using the RadioField object. Since there are multiple buttons in this group, the instance declaration takes an argument for the group label and a keyword argument choices which takes a list of tuples.

Each tuple represents a button in the group and contains the button identifier string and the button label string.

#### Form class declaration my_radio_group = RadioField("Radio Group Label", choices=[("id1", "One"), ("id2","Two"), ("id3","Three")])

Since the RadioField() instance generally contains multiple buttons it is necessary to iterate through it to access the components of the subfields.

Instructions

1.

A common practice when creating web forms with Flask is to define the forms in a separate file and import them into the main app.

  • CommentForm has been moved to the new file forms.py
  • RecipeForm is fully functional and has been added to forms.py
  • RadioField has been added to the wtforms import statement
  • The list recipe_categories in RecipeForm holds the 3 radio button tuples.

Run the code to move on.

2.

In forms.py create a radio field instance and assign it to recipe_type. The instance should have the label "Type" and recipe_categories should be assigned to the keyword argument choices.

3.

In index.html a table has been added to contain our radio buttons. Inside the for loop that iterates through the 3 buttons, use the loop variable btn to insert the button field in the first <td> tag and the field label in the other <td> tag pair.

4.

Lastly, in the index route of app.py add the recipe_type data from the form to types[new_id].

When you’re done give the recipe form a try with the new radio buttons.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?