Form field types in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered HTML output of this Flask-WTF form field?

Consider this Flask-WTF form field definition:

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])

What HTML does the name field render by default?

A <input id="name" name="name" type="text" value="">

B <input id="name" name="name" type="password" value="">

C <textarea id="name" name="name"></textarea>

D <input id="name" name="name" type="email" value="">

💡 Hint

Think about the default HTML input type for a StringField in Flask-WTF.

A StringField renders as a standard text input field in HTML, which uses type="text". Other types like password or email are different field classes.

📝 Syntax

intermediate

Which option correctly defines a Flask-WTF IntegerField with a minimum value validator?

You want to create a form field that accepts only integers greater than or equal to 10. Which code snippet correctly defines this field?

A age = IntegerField('Age', validators=[NumberRange(min=10)])

B age = IntegerField('Age', validators=[DataRequired(min=10)])

C age = IntegerField('Age', validators=[Length(min=10)])

D age = IntegerField('Age', validators=[InputRequired(min=10)])

💡 Hint

Look for the validator that checks numeric ranges.

NumberRange validator is used to enforce minimum and maximum numeric values. DataRequired, Length, and InputRequired do not accept a min parameter for numeric range.

❓ state_output

advanced

What is the value of the form field after submission with empty input?

Given this Flask-WTF form:

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])

If the user submits the form with the username field left empty, what will be the value of form.username.data after form.validate_on_submit() is called?

A Raises a ValidationError

B None

C An empty string ('')

D The string 'None'

💡 Hint

Think about how WTForms handles empty text input fields.

WTForms sets the data attribute to an empty string if the input is empty. Validation fails but the data is still an empty string, not None or an exception.

🔧 Debug

advanced

Why does this Flask-WTF form field raise a TypeError?

Examine this form field definition:

from wtforms import SelectField

class MyForm(FlaskForm):
    choice = SelectField('Choose', choices='yes,no,maybe')

When rendering or validating, a TypeError occurs. Why?

A SelectField requires a default value, missing here.

B The <code>choices</code> argument must be a list of tuples, not a string.

C The field name 'choice' is a reserved keyword causing the error.

D SelectField cannot be used without a validator.

💡 Hint

Check the expected type for the choices parameter.

choices must be a list (or iterable) of tuples like [('yes', 'Yes'), ('no', 'No')]. Passing a string causes iteration over characters, leading to a TypeError.

🧠 Conceptual

expert

Which Flask-WTF field type should you use for a form input that accepts multiple file uploads?

You want users to upload several files at once in your Flask form. Which field type is best suited for this?

A TextAreaField with file URLs

B FileField with <code>multiple=True</code> attribute

C StringField with comma-separated file paths

D MultipleFileField

💡 Hint

Look for a field type designed specifically for multiple files.

MultipleFileField is designed to handle multiple file uploads in Flask-WTF. FileField handles single files only. Other options are not suitable for file uploads.

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