Estilizando Campos de Formulários

No Django, os campos de formulário vêm com estilos padrão. No entanto, muitas vezes é necessário aplicar estilos e classes personalizadas para atender às necessidades do projeto. O Django oferece diversos mecanismos para estilizar campos e suas estruturas associadas.

Estilização Manual

Uma abordagem comum é exibir manualmente cada campo no template, permitindo aplicar regras de estilização diretamente aos elementos ou aos blocos que os contêm. Considere o seguinte exemplo de formulário:

from django import forms

class UserForm(forms.Form):
    name = forms.CharField(min_length=3)
    age = forms.IntegerField(min_value=1, max_value=100)

No template, os campos podem ser renderizados manualmente com estilização aplicada a cada elemento:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Formulários Django</title>
    <style>
        .alert { color: red; }
        .form-group { margin: 10px 0; }
        .form-group input { width: 250px; height: 25px; border-radius: 3px; }
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <div>
            {% for field in form %}
                <div class="form-group">
                    {{ field.label_tag }}
                    <div>{{ field }}</div>
                    {% if field.errors %}
                        {% for error in field.errors %}
                            <div class="alert alert-danger">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <input type="submit" value="Send">
    </form>
</body>
</html>

Nesse exemplo, os campos são exibidos individualmente dentro de blocos <div> e recebem classes CSS específicas para personalização. Quando dados inválidos são enviados, os erros de validação são exibidos com a classe .alert, destacando visualmente os problemas.

Estilizando Campos de Formulários em Django

Uso de required_css_class e error_css_class

O Django permite adicionar classes CSS automaticamente a elementos associados a campos específicos, como labels e mensagens de erro, usando os atributos required_css_class e error_css_class. Considere o seguinte formulário:

from django import forms

class UserForm(forms.Form):
    name = forms.CharField(min_length=3)
    age = forms.IntegerField(min_value=1, max_value=100)
    required_css_class = "field"
    error_css_class = "error"

No template, é necessário definir ou importar os estilos associados às classes "field" e "error":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Formulários Django</title>
    <style>
        .field { font-weight: bold; }
        .error { color: red; }
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <table>
            {{ form }}
        </table>
        <input type="submit" value="Send">
    </form>
</body>
</html>

Nesse caso, o Django aplica automaticamente as classes definidas para os labels e mensagens de erro, simplificando a estilização.

Combinação de Métodos

Os métodos mencionados podem ser combinados para maior flexibilidade. Por exemplo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Formulários Django</title>
    <style>
        .field { font-weight: bold; }
        .error { color: red; }
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <div>
            {% for field in form %}
                <div class="row">
                    {{ field.label_tag }}
                    <div>{{ field }}</div>
                    {% if field.errors %}
                        <div class="error">{{ field.errors }}</div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <input type="submit" value="Send">
    </form>
</body>
</html>

Nesse caso, o Django aplica automaticamente as classes definidas para os labels e mensagens de erro, simplificando a estilização.

Estilização com Widgets

Outro mecanismo eficiente de estilização é a aplicação de classes CSS e estilos diretamente nos widgets dos campos. O parâmetro attrs permite adicionar atributos HTML diretamente ao elemento gerado pelo campo:

from django import forms

class UserForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={"class": "myfield"}))
    age = forms.IntegerField(widget=forms.NumberInput(attrs={"class": "myfield"}))

No exemplo acima, ambos os campos recebem a classe CSS myfield. O estilo associado a essa classe pode ser definido no template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Formulários Django</title>
    <style>
        .myfield {
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 25px;
            width: 200px;
            margin: 10px 10px 10px 0;
        }
    </style>
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        <div>
            {% for field in form %}
            <div>
                {{ field.label_tag }}
                <div>{{ field }}</div>
            </div>
            {% endfor %}
        </div>
        <input type="submit" value="Send">
    </form>
</body>
</html>

Estilização de Campos de Formulário Usando Widgets em Django