7.6. Una presentación personalizada

La forma más rápida de personalizar la presentación de un formulario es mediante CSS. En particular, la lista de errores puede dotarse de mejoras visuales, y el elemento <ul> tiene asignada la clase errorlist para ese propósito. Los siguientes estilos CSS hacen que los errores se vean de forma destacada en la página:

<style type="text/css">
    ul.errorlist {
        margin: 0;
        padding: 0;
    }
    .errorlist li {
        background-color: red;
        color: white;
        display: block;
        font-size: 10px;
        margin: 0 0 3px;
        padding: 4px 5px;
    }
</style>

Si bien es conveniente que el HTML del formulario sea generado por nosotros, en muchos casos la disposición por defecto no quedaría bien en nuestra aplicación. {{ form.as_table }} y similares son atajos útiles que podemos usar mientras desarrollamos nuestra aplicación, pero todo lo que concierne a la forma en que nuestro formulario es representado puede ser sobreescrito, casi siempre desde la plantilla misma.

Cada widget de un campo (<input type="text">, <select>, <textarea>, o similares) puede generarse individualmente accediendo a {{ form.fieldname }}. Cualquier error asociado con un campo está disponible como {{ form.fieldname.errors }}. Podemos usar estas variables para construir nuestra propia plantilla para el formulario:

<form action="." method="POST">
    <div class="fieldWrapper">
        {{ form.topic.errors }}
        <label for="id_topic">Kind of feedback:</label>
        {{ form.topic }}
    </div>
    <div class="fieldWrapper">
        {{ form.message.errors }}
        <label for="id_message">Your message:</label>
        {{ form.message }}
    </div>
    <div class="fieldWrapper">
        {{ form.sender.errors }}
        <label for="id_sender">Your email (optional):</label>
        {{ form.sender }}
    </div>
    <p><input type="submit" value="Submit"></p>
</form>

{{ form.message.errors }} se muestra como un <ul class="errorlist"> si se producen errores y como una cadena de caracteres en blanco si el campo es válido ( o si el formulario no está vinculado). También podemos tratar a la variable form.message.errors como a un booleano o incluso iterar sobre la misma como en una lista, por ejemplo:

<div class="fieldWrapper{% if form.message.errors %} errors{% endif %}">
    {% if form.message.errors %}
        <ol>
        {% for error in form.message.errors %}
            <li><strong>{{ error|escape }}</strong></li>
        {% endfor %}
        </ol>
    {% endif %}
    {{ form.message }}
</div>

En caso de que hubieran errores de validación, se agrega la clase "errors" al <div> contenedor y se muestran los errores en una lista ordenada.