Form field types in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the correct form field type for a text input in Flask-WTF.

Flask

from flask_wtf import FlaskForm
from wtforms import [1]

class MyForm(FlaskForm):
    name = [1]('Name')

Drag options to blanks, or click blank then click option'

ABooleanField

BIntegerField

CStringField

DPasswordField

Attempts:

3 left

💡 Hint

Common Mistakes

Using IntegerField for text input

Using BooleanField for text input

The StringField is used for text input fields in Flask-WTF forms.

2fill in blank

medium

Complete the code to add a password input field to the form.

Flask

from flask_wtf import FlaskForm
from wtforms import StringField, [1]

class LoginForm(FlaskForm):
    username = StringField('Username')
    password = [1]('Password')

Drag options to blanks, or click blank then click option'

ADateField

BBooleanField

CTextAreaField

DPasswordField

Attempts:

3 left

💡 Hint

Common Mistakes

Using StringField for passwords

Using BooleanField for passwords

The PasswordField is used for password inputs, hiding the text as the user types.

3fill in blank

hard

Fix the error in the code by choosing the correct field type for a checkbox.

Flask

from flask_wtf import FlaskForm
from wtforms import StringField, [1]

class SubscribeForm(FlaskForm):
    subscribe = [1]('Subscribe to newsletter')

Drag options to blanks, or click blank then click option'

ATextAreaField

BBooleanField

CIntegerField

DDateField

Attempts:

3 left

💡 Hint

Common Mistakes

Using StringField for checkboxes

Using IntegerField for checkboxes

The BooleanField is used for checkboxes in Flask-WTF forms.

4fill in blank

hard

Fill both blanks to create a form with a text area and a date input field.

Flask

from flask_wtf import FlaskForm
from wtforms import [1], [2]

class FeedbackForm(FlaskForm):
    comments = [1]('Comments')
    visit_date = [2]('Date of Visit')

Drag options to blanks, or click blank then click option'

ATextAreaField

BDateField

CStringField

DBooleanField

Attempts:

3 left

💡 Hint

Common Mistakes

Using StringField instead of TextAreaField

Using BooleanField for dates

TextAreaField is for multi-line text input, and DateField is for date inputs.

5fill in blank

hard

Fill all three blanks to define a form with an email, integer, and checkbox field.

Flask

from flask_wtf import FlaskForm
from wtforms import [1], [2], [3]

class RegistrationForm(FlaskForm):
    email = [1]('Email')
    age = [2]('Age')
    agree_terms = [3]('Agree to Terms')

Drag options to blanks, or click blank then click option'

AEmailField

BIntegerField

CBooleanField

DStringField

Attempts:

3 left

💡 Hint

Common Mistakes

Using StringField for email

Using StringField for age

Using StringField for checkbox

EmailField validates email input, IntegerField accepts numbers, and BooleanField is for checkboxes.

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