Form fields and widgets in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Django form class.

Django

from django import [1]

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

Amodels

Bforms

Cviews

Dtemplates

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from django.models instead of django.forms

Using django.views or django.templates which are unrelated here

The forms module is used to create form classes in Django.

2fill in blank

medium

Complete the code to define a CharField with a max length of 100.

Django

name = forms.[1](max_length=100)

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

AIntegerField

BDateField

CCharField

DEmailField

Attempts:

3 left

💡 Hint

Common Mistakes

Using IntegerField for text input

Using EmailField when a general text field is needed

CharField is used for text input with a maximum length.

3fill in blank

hard

Fix the error in the widget assignment to use a Textarea widget.

Django

description = forms.CharField(widget=forms.[1])

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

ATextarea

BTextInput

CCheckboxInput

DSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Using TextInput instead of Textarea for multi-line input

Using CheckboxInput or Select which are unrelated widgets

The Textarea widget creates a multi-line text box for input.

4fill in blank

hard

Fill both blanks to create an EmailField with a placeholder attribute.

Django

email = forms.EmailField(widget=forms.TextInput(attrs=[1]))

# attrs dictionary example: [2]

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

A{'placeholder': 'Enter your email'}

B{'class': 'email-input'}

C{'placeholder': 'Your email here'}

D{'id': 'email-field'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id attributes instead of placeholder

Not using a dictionary for attrs

The attrs dictionary sets HTML attributes like placeholder text.

5fill in blank

hard

Fill all three blanks to create a ChoiceField with radio buttons and choices.

Django

GENDER_CHOICES = [
    ('M', 'Male'),
    ('F', 'Female'),
    ('O', 'Other')
]

gender = forms.[1](
    choices=[2],
    widget=forms.[3]()
)

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

AChoiceField

BGENDER_CHOICES

CRadioSelect

DCharField

Attempts:

3 left

💡 Hint

Common Mistakes

Using CharField instead of ChoiceField

Not passing the choices list

Using TextInput widget instead of RadioSelect

ChoiceField is used for selecting one option from choices.
The choices argument takes a list of tuples.
The RadioSelect widget shows options as radio buttons.

Practice

1. What is the main purpose of a Form field in Django?

easy

A. To define the type of data you want to collect from the user

B. To style the form with CSS classes

C. To handle database queries automatically

D. To create HTML templates for the form

Solution

1. Step 1: Understand the role of form fields

   Form fields specify what kind of data the form expects, like text, numbers, or dates.

2. Step 2: Differentiate from widgets and templates

   Widgets control how the input looks, and templates handle HTML structure, not data type.

3. Final Answer:

   To define the type of data you want to collect from the user -> Option A

4. Quick Check:

   Form field = data type definition [OK]

Hint: Form fields = data type; widgets = appearance [OK]

Common Mistakes:

• Confusing widgets with form fields
• Thinking form fields handle styling
• Assuming form fields manage database queries

2. Which of the following is the correct way to add a placeholder attribute to a Django form field using a widget?

easy

A. forms.CharField(widget=forms.TextInput(placeholder='Enter name'))

B. forms.CharField(placeholder='Enter name')

C. forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Enter name'}))

D. forms.CharField(attrs={'placeholder': 'Enter name'})

Solution

1. Step 1: Recall widget attribute usage

   In Django, to add HTML attributes like placeholder, you pass them inside the widget's attrs dictionary.

2. Step 2: Check each option's syntax

   forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Enter name'})) correctly uses widget=forms.TextInput(attrs={'placeholder': 'Enter name'}). Others misuse or omit attrs.

3. Final Answer:

   forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Enter name'})) -> Option C

4. Quick Check:

   Use attrs dict inside widget for HTML attributes [OK]

Hint: Use attrs dict inside widget to add HTML attributes [OK]

Common Mistakes:

• Passing placeholder directly to CharField
• Omitting attrs dictionary
• Using wrong widget syntax

3. Given the form field declaration below, what HTML input element will be rendered?

email = forms.EmailField(widget=forms.EmailInput(attrs={'class': 'email-field', 'aria-label': 'Email address'}))

medium

A. <input type="text" class="email-field" aria-label="Email address" name="email" required>

B. <input type="email" class="email-field" aria-label="Email address" name="email" required>

C. <textarea class="email-field" aria-label="Email address" name="email" required></textarea>

D. <input type="email" name="email" required>

Solution

1. Step 1: Identify the widget type

   The widget is EmailInput, which renders an input with type="email".

2. Step 2: Check the attributes added

   The attrs dictionary adds class="email-field" and aria-label="Email address" to the input element.

3. Final Answer:

   <input type="email" class="email-field" aria-label="Email address" name="email" required> -> Option B

4. Quick Check:

   EmailField + EmailInput widget = input type email with attrs [OK]

Hint: EmailInput widget renders input type email with given attrs [OK]

Common Mistakes:

• Confusing EmailInput with TextInput
• Ignoring attrs dictionary
• Expecting textarea instead of input

4. What is wrong with this Django form field declaration?

age = forms.IntegerField(widget=forms.TextInput(attrs={'type': 'number'}))

medium

A. Using TextInput widget with IntegerField is incorrect; use NumberInput instead

B. attrs dictionary cannot contain 'type' attribute

C. IntegerField does not accept widgets

D. The syntax is correct and will work as expected

Solution

1. Step 1: Understand widget compatibility

   IntegerField expects a widget that supports numeric input, like NumberInput.

2. Step 2: Analyze the widget used

   Using TextInput with attrs={'type': 'number'} tries to force input type but is not the recommended way and may cause issues.

3. Final Answer:

   Using TextInput widget with IntegerField is incorrect; use NumberInput instead -> Option A

4. Quick Check:

   IntegerField + NumberInput widget is correct combo [OK]

Hint: Use NumberInput widget for IntegerField, not TextInput [OK]

Common Mistakes:

• Forcing input type in attrs instead of using correct widget
• Assuming all widgets work with all fields
• Ignoring widget-field compatibility

5. You want to create a Django form field for a password input that: - Hides the typed characters - Has a placeholder saying 'Enter your password' - Adds a CSS class 'password-input' Which of the following is the correct way to declare this field?

hard

A. password = forms.CharField(widget=forms.PasswordInput(placeholder='Enter your password', class='password-input'))

B. password = forms.PasswordField(widget=forms.TextInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'}))

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

D. password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'}))

Solution

1. Step 1: Choose the correct field and widget

   Password inputs use CharField with PasswordInput widget to hide characters.

2. Step 2: Add attributes correctly

   Attributes like placeholder and class must be inside the attrs dictionary passed to the widget.

3. Step 3: Check each option

   password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'})) correctly uses PasswordInput(attrs={...}). password = forms.PasswordField(widget=forms.TextInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'})) uses non-existent PasswordField. password = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'})) uses TextInput which renders type="text" and does not hide characters. password = forms.CharField(widget=forms.PasswordInput(placeholder='Enter your password', class='password-input')) passes attrs incorrectly.

4. Final Answer:

   password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Enter your password', 'class': 'password-input'})) -> Option D

5. Quick Check:

   PasswordInput widget + attrs dict = correct password field [OK]

Hint: Use PasswordInput widget with attrs dict for placeholders and classes [OK]

Common Mistakes:

• Using non-existent PasswordField
• Passing attrs outside attrs dictionary
• Using TextInput instead of PasswordInput