Form field types in Flask - Mini Project: Build & Apply

Form field types

📖 Scenario: You are building a simple web form for a small business website using Flask. The form will collect user information including their name, email, age, and a message.

🎯 Goal: Create a Flask web form using different form field types to collect user data. The form should include text input, email input, number input, and a text area. This will help you understand how to use various form fields in Flask.

📋 What You'll Learn

Create a Flask app with a route for the form

Use Flask-WTF to create a form class with different field types

Include fields: StringField for name, EmailField for email, IntegerField for age, TextAreaField for message

Render the form in an HTML template with proper labels

💡 Why This Matters

🌍 Real World

Forms are essential for collecting user input on websites, such as contact forms, registration, and surveys.

💼 Career

Knowing how to create and handle forms in Flask is a key skill for backend web developers working with Python.

1

Set up Flask app and import FlaskForm

Create a Flask app by importing Flask and FlaskForm from flask_wtf. Initialize the app with app = Flask(__name__) and set app.config['SECRET_KEY'] = 'secret'.

Flask

from flask import Flask
from flask_wtf import FlaskForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
# Your code here

Hint

Remember to import Flask and FlaskForm, then create the app and set a secret key for forms.

2

Create a form class with different field types

Create a class called UserForm that inherits from FlaskForm. Add these fields: name as StringField, email as EmailField, age as IntegerField, and message as TextAreaField. Import these field types from wtforms. Add SubmitField named submit.

Flask

from flask import Flask
from flask_wtf import FlaskForm
from wtforms import StringField, EmailField, IntegerField, TextAreaField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

# Create UserForm class with fields here

Hint

Define the form class with the exact field names and types as instructed.

3

Create a route to display the form

Create a Flask route for '/' using @app.route('/'). Define a function index() that creates an instance of UserForm called form. Render a template called 'form.html' passing form=form.

Flask

from flask import Flask
from flask_wtf import FlaskForm
from wtforms import StringField, EmailField, IntegerField, TextAreaField, SubmitField
from flask import render_template

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class UserForm(FlaskForm):
    name = StringField('Name')
    email = EmailField('Email')
    age = IntegerField('Age')
    message = TextAreaField('Message')
    submit = SubmitField('Submit')

# Create route '/' and function index() to render 'form.html' with form
# Your code here

Hint

Use the @app.route decorator and create the index function that returns the form template.

4

Create the HTML template to render the form

Create a file named form.html. Use Jinja2 syntax to render the form fields inside a <form> tag with method post. Include labels and inputs for form.name, form.email, form.age, form.message, and the form.submit button. Use {{ form.csrf_token }} inside the form for security.

Flask

from flask import Flask
from flask_wtf import FlaskForm
from wtforms import StringField, EmailField, IntegerField, TextAreaField, SubmitField
from flask import render_template

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class UserForm(FlaskForm):
    name = StringField('Name')
    email = EmailField('Email')
    age = IntegerField('Age')
    message = TextAreaField('Message')
    submit = SubmitField('Submit')

@app.route('/')
def index():
    form = UserForm()
    return render_template('form.html', form=form)


# Your code here

Hint

Use Jinja2 syntax to render each form field with its label inside a form tag with method post.

Practice

1. Which Flask-WTF form field type should you use to collect a user's password securely?

easy

A. StringField

B. PasswordField

C. BooleanField

D. SelectField

Solution

1. Step 1: Understand the purpose of each field type

   PasswordField is designed to mask input for passwords, unlike StringField which is plain text.

2. Step 2: Match the field to the requirement

   Since passwords need to be hidden when typed, PasswordField is the correct choice.

3. Final Answer:

   PasswordField -> Option B

4. Quick Check:

   Password input uses PasswordField [OK]

Hint: Use PasswordField for hidden password input [OK]

Common Mistakes:

• Using StringField for passwords exposes text
• Choosing BooleanField or SelectField for password input
• Confusing PasswordField with FileField

2. Which of the following is the correct way to declare a checkbox field in a Flask-WTF form?

easy

A. checkbox = BooleanField('Accept Terms')

B. checkbox = StringField('Accept Terms')

C. checkbox = PasswordField('Accept Terms')

D. checkbox = SelectField('Accept Terms')

Solution

1. Step 1: Identify the field type for checkboxes

   BooleanField is used for true/false inputs like checkboxes.

2. Step 2: Verify the syntax

   BooleanField('Accept Terms') correctly declares a checkbox with label 'Accept Terms'.

3. Final Answer:

   checkbox = BooleanField('Accept Terms') -> Option A

4. Quick Check:

   Checkbox uses BooleanField [OK]

Hint: Checkboxes use BooleanField in Flask-WTF [OK]

Common Mistakes:

• Using StringField for checkboxes
• Confusing SelectField with BooleanField
• Incorrect field initialization syntax

3. Given this Flask-WTF form snippet:

class MyForm(FlaskForm):
    color = SelectField('Favorite Color', choices=[('r', 'Red'), ('g', 'Green'), ('b', 'Blue')])

form = MyForm()
print(form.color.data)

What will be printed if the user selects 'Green' and submits the form?

medium

A. 'Green'

B. None

C. 'g'

D. 'color'

Solution

1. Step 1: Understand SelectField choices format

   Choices are tuples where first value is the actual data, second is the label shown.

2. Step 2: Identify the data returned on selection

   Selecting 'Green' returns the first element of the tuple: 'g'.

3. Final Answer:

   'g' -> Option C

4. Quick Check:

   SelectField returns choice key, not label [OK]

Hint: SelectField returns the choice key, not the label [OK]

Common Mistakes:

• Assuming the label is returned instead of the key
• Confusing field name with data
• Expecting None if form not submitted

4. What is wrong with this Flask-WTF form field declaration?

class UploadForm(FlaskForm):
    file = FileField('Upload File', validators=[DataRequired()])

medium

A. FileField cannot have validators

B. Label 'Upload File' is not allowed

C. FileField should be StringField

D. Missing import for DataRequired validator

Solution

1. Step 1: Check validator usage

   DataRequired is a validator that must be imported from wtforms.validators.

2. Step 2: Identify missing import

   If DataRequired is not imported, this code will raise a NameError.

3. Final Answer:

   Missing import for DataRequired validator -> Option D

4. Quick Check:

   Validators need proper imports [OK]

Hint: Always import validators before using them [OK]

Common Mistakes:

• Assuming FileField can't have validators
• Using wrong field type for file uploads
• Ignoring import errors

5. You want to create a Flask-WTF form that asks for a user's birthdate and a yes/no confirmation if they agree to terms. Which combination of field types is correct?

hard

A. DateField for birthdate and BooleanField for agreement

B. StringField for birthdate and SelectField for agreement

C. PasswordField for birthdate and BooleanField for agreement

D. FileField for birthdate and StringField for agreement

Solution

1. Step 1: Choose appropriate field for date input

   DateField is designed to handle date inputs like birthdate.

2. Step 2: Choose field for yes/no confirmation

   BooleanField is perfect for true/false inputs like agreement checkboxes.

3. Final Answer:

   DateField for birthdate and BooleanField for agreement -> Option A

4. Quick Check:

   DateField + BooleanField = correct combo [OK]

Hint: Use DateField for dates and BooleanField for yes/no [OK]

Common Mistakes:

• Using StringField for dates causes format issues
• Using PasswordField for non-password inputs
• Confusing FileField with date or boolean inputs