Form fields and widgets in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered HTML output of this Django form field?

Consider the following Django form field definition. What HTML does it render in the browser?

Django

from django import forms

class SampleForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'input-name', 'placeholder': 'Enter your name'}))

form = SampleForm()
print(form['name'])

A <input type="text" name="name" class="input-name" placeholder="Enter your name" required id="id_name">

B <input type="text" name="name" placeholder="Enter your name">

C <input type="text" class="input-name" id="name">

D <textarea name="name" class="input-name" placeholder="Enter your name"></textarea>

💡 Hint

Look at the widget type and the attributes passed in attrs.

The CharField with TextInput widget renders an <input type="text"> element. The attrs dictionary adds HTML attributes like class and placeholder. Django also adds name, id, and required by default.

📝 Syntax

intermediate

Which option correctly defines a Django form field with a custom widget?

You want to create a Django form field for an email address that uses an HTML5 email input widget. Which code snippet is correct?

A email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Your email'}))

B email = forms.EmailField(widget=forms.EmailInput(attrs={'placeholder': 'Your email'}))

C email = forms.EmailField(widget=forms.TextInput(attrs={'type': 'email', 'placeholder': 'Your email'}))

D email = forms.EmailField(widget=forms.InputEmail(attrs={'placeholder': 'Your email'}))

💡 Hint

Check the widget class names and field types carefully.

forms.EmailField is the correct field type for emails. forms.EmailInput is the correct widget for HTML5 email input. Option B uses both correctly.

Option B uses TextInput with a manual type attribute, which is not recommended. Option B mismatches field and widget types. Option B uses a non-existent widget class.

❓ state_output

advanced

What is the cleaned_data value after form submission?

Given this Django form and submitted data, what is the value of cleaned_data['age'] after calling form.is_valid()?

Django

from django import forms

class AgeForm(forms.Form):
    age = forms.IntegerField(min_value=18, max_value=99)

submitted_data = {'age': '25'}
form = AgeForm(submitted_data)
form.is_valid()
age_value = form.cleaned_data['age']

A Raises a ValidationError

B '25' (as a string)

C 25 (as an integer)

D None

💡 Hint

Remember how Django form fields convert input types.

Django form fields convert input strings to Python types during validation. IntegerField converts the string '25' to the integer 25 in cleaned_data. Since 25 is within the allowed range, validation passes.

🔧 Debug

advanced

Why is this Django form field definition incorrect?

Examine the following form field definition. Why does the rendered select not show the expected choices?

Django

from django import forms

class MyForm(forms.Form):
    choices = [('1', 'One'), ('2', 'Two')]
    option = forms.ChoiceField(widget=forms.Select(choices=choices))

A Because ChoiceField requires a default value

B Because Select widget does not accept choices argument

C Because choices must be a dictionary, not a list of tuples

D Because choices should be passed to ChoiceField, not to the widget

💡 Hint

Check where choices are expected in Django forms.

The choices argument belongs to the ChoiceField constructor, not the widget. Although the Select widget accepts a choices argument, Django overrides the widget's choices with the field's own choices (which are empty), resulting in an empty dropdown.

🧠 Conceptual

expert

Which widget correctly supports multiple file uploads in Django forms?

You want users to upload multiple files at once using a Django form. Which widget should you use to allow selecting multiple files?

A forms.ClearableFileInput(attrs={'multiple': True})

B forms.FileInput(multiple=True)

C forms.MultipleFileInput()

D forms.FileField(widget=forms.FileInput(attrs={'multiple': False}))

💡 Hint

Look for the widget that supports the 'multiple' attribute properly.

ClearableFileInput is the standard widget for file inputs in Django. Adding attrs={'multiple': True} enables multiple file selection in browsers. Option A is invalid because FileInput does not accept a direct multiple argument. Option A does not exist. Option A disables multiple selection.