Dibujar un formulario

Parte de la sección Formularios del Journey de Django de Coddy. Lección 6 de 20.

La página en /events/new/ escribe a mano cada etiqueta y cada campo de entrada, y EventForm vuelve a enumerar los mismos campos. Un formulario puede generarse por sí mismo: pásalo a la plantilla y escribe {{ form }} dentro de la etiqueta <form>. Una página de contacto:

<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Send</button>
</form>

{{ form }} escribe una etiqueta y un campo de entrada para cada campo, en el orden en que la clase los declara. Cada campo de entrada obtiene el name del campo y un id como id_email, para que su etiqueta apunte a él. La etiqueta del formulario, el token y el botón siguen siendo tuyos.

Un formulario en el que todavía no se ha escrito nada es la clase llamada sin datos: ContactForm(). Django también marca los campos de entrada obligatorios con required, así que el navegador impide enviar un campo vacío. El cuadro de fecha ahora es texto sin formato, porque Django genera un DateField como texto. Escribe fechas como 2031-12-05.

Desafío

Fácil

Deja que EventForm genere sus propios campos.

En new_event, pasa un EventForm vacío a la plantilla como form.
En new_event.html, sustituye las tres etiquetas y los campos de entrada por {{ form }}, que los escribe por ti. Conserva la etiqueta del formulario, el token, el botón y el mensaje de error.

Añade un evento con fecha 2031-12-05: Django generó todas las etiquetas y llegas a la página del evento.

Pruébalo tú mismo

{% extends "events/base.html" %}

{% block title %}Add an event{% endblock %}

{% block content %}
<h1>Add an event</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<form method="post">
    {% csrf_token %}
    <label for="title">Title</label>
    <input id="title" name="title">
    <label for="date">Date</label>
    <input id="date" name="date" type="date">
    <label for="place">Place</label>
    <input id="place" name="place">
    <button type="submit">Add event</button>
</form>
{% endblock %}