יצירת טופס

חלק מהיחידה טפסים במסלול ה-Django של Coddy. שיעור 6 מתוך 20.

הדף בכתובת /events/new/ כותב כל תווית ושדה קלט ידנית, ו־EventForm מפרט שוב את אותם השדות. טופס יכול ליצור את עצמו: מעבירים אותו לתבנית וכותבים {{ form }} בתוך תגית <form>. דף ליצירת קשר:

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

{{ form }} כותב תווית ושדה קלט לכל שדה, לפי הסדר שבו המחלקה מגדירה אותם. כל שדה קלט מקבל את ה־name של השדה ואת id כמו id_email, כך שהתווית שלו מצביעה אליו. תגית הטופס, האסימון והכפתור נשארים בשליטתך.

טופס שעדיין לא הוקלד בו דבר הוא המחלקה שנקראת ללא נתונים: ContactForm(). Django גם מוסיף לשדות קלט נדרשים את required, כך שהדפדפן עוצר שליחה של שדה ריק. תיבת התאריך היא כעת טקסט פשוט, כי Django מציג DateField כשדה טקסט. יש להקליד תאריכים כמו 2031-12-05.

אתגר

קל

תן ל־EventForm להציג את השדות שלו בעצמו.

ב־new_event, העבר לתבנית EventForm ריק בתור form.
ב־new_event.html, החלף את שלוש התוויות ואת שדות הקלט ב־{{ form }}, שכותב אותם עבורך. השאר את תג הטופס, את האסימון, את הכפתור ואת הודעת השגיאה.

הוסף אירוע בתאריך 2031-12-05: Django הציג את כל התוויות, ואתה מגיע לדף של האירוע.

נסו בעצמכם

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