{{ form.as_ul }} – Render Django Forms as list

Django provides built-in methods to render forms with different HTML structures. The {{ form.as_ul }} method renders form fields as HTML list items, making forms more semantic and accessible.

This method generates an unordered list structure where each form field becomes a list item with proper label-input pairs, offering better styling flexibility and improved accessibility for screen readers.

Creating a Django Form

First, define a form class in your forms.py file ?

from django import forms
from .models import UserRegistration

class UserRegistrationForm(forms.ModelForm):
    class Meta:
        model = UserRegistration
        fields = ['first_name', 'last_name', 'roll_no', 'password']

Using the as_ul Method

In your template, use the as_ul method to render the form as a list ?

<form method="POST">
    {% csrf_token %}
    <ul>
        {{ form.as_ul }}
    </ul>
    <input type="submit" value="Submit">
</form>

Generated HTML Structure

The as_ul method generates the following HTML structure ?

<li><label for="id_first_name">First name:</label> <input type="text" name="first_name" required id="id_first_name"></li>
<li><label for="id_last_name">Last name:</label> <input type="text" name="last_name" required id="id_last_name"></li>
<li><label for="id_roll_no">Roll no:</label> <input type="text" name="roll_no" required id="id_roll_no"></li>
<li><label for="id_password">Password:</label> <input type="password" name="password" required id="id_password"></li>

Customizing List Appearance

Add CSS classes and styles to customize the form appearance ?

<form method="POST">
    {% csrf_token %}
    <ul class="form-list" style="list-style: none; padding: 0;">
        {{ form.as_ul }}
    </ul>
    <input type="submit" value="Register" class="btn-submit">
</form>

Complete Example with View

Here's a complete implementation including the view ?

# views.py
from django.shortcuts import render, redirect
from .forms import UserRegistrationForm

def register_user(request):
    if request.method == 'POST':
        form = UserRegistrationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('success')
    else:
        form = UserRegistrationForm()
    
    return render(request, 'register.html', {'form': form})

Form Rendering Methods Comparison

Best Practices

• Accessibility: The list structure provides better context for screen readers

• Styling: Use CSS to customize list appearance without affecting semantics

• Error handling: Include {{ form.errors }} to display validation errors

• CSRF protection: Always include {% csrf_token %} in POST forms

Conclusion

The {{ form.as_ul }} method provides a semantic way to render Django forms as HTML lists. This approach improves accessibility and offers flexible styling options while maintaining clean, maintainable code.