Menu
CoddyTech

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 a 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 los declara la clase. Cada campo de entrada recibe 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, para que el navegador impida enviar un campo vacío.

challenge icon

Desafío

Fácil
  • En new_event, pasa un EventForm vacío a la plantilla como form.
  • En new_event.html, reemplaza las etiquetas y los campos de entrada por el formulario generado. Conserva la etiqueta del formulario, el token, el botón y el mensaje de error.

Pulsa Run y abre /events/new/: Django genera los campos.

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 %}

Todas las lecciones de Formularios

Practica por tu cuenta: Playground de Django