Créer un formulaire

Fait partie de la section Formulaires du Journey Django de Coddy. Leçon 6 sur 20.

La page à l’adresse /events/new/ écrit chaque libellé et chaque champ de saisie à la main, et EventForm énumère une nouvelle fois les mêmes champs. Un formulaire peut générer son propre contenu : passez-en un au modèle et écrivez {{ form }} à l’intérieur de la balise <form>. Une page de contact :

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

{{ form }} écrit un libellé et un champ de saisie pour chaque champ, dans l’ordre où la classe les déclare. Chaque champ de saisie reçoit le name du champ et un id tel que id_email, afin que son libellé pointe vers lui. La balise du formulaire, le jeton et le bouton restent de votre ressort.

Un formulaire dans lequel rien n’a encore été saisi est la classe appelée sans données : ContactForm(). Django marque également les champs de saisie obligatoires avec required, afin que le navigateur bloque l’envoi si un champ est vide. Le champ de date est maintenant un simple champ de texte, car Django affiche un DateField sous forme de texte. Saisissez les dates au format 2031-12-05.

Défi

Facile

Laisse EventForm générer ses propres champs.

Dans new_event, transmets un EventForm vide au modèle sous le nom form.
Dans new_event.html, remplace les trois libellés et les champs de saisie par {{ form }}, qui les génère pour toi. Conserve la balise de formulaire, le jeton, le bouton et le message d’erreur.

Ajoute un événement daté du 2031-12-05 : Django a généré chaque libellé, et tu arrives sur la page de l’événement.

Essayez vous-même

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