Ver índice de contenidos del libro

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.