שדה אחר שדה

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

{{ form }} מציג כל שדה באותו אופן, אחד מתחת לשני. כדי להציג כל שדה בתיבה משלך, הצג את השדות בזה אחר זה.

טופס הוא רשימה של השדות שלו: {% for field in form %} מספק אותם לפי הסדר שבו המחלקה מגדירה אותם. {{ field.as_field_group }} מציג שדה אחד עם התווית שלו, השגיאות שלו ושדה הקלט שלו. דף הרשמה עם שני שמות זה לצד זה:

<div class="row">
    <div class="half">{{ form.first_name.as_field_group }}</div>
    <div class="half">{{ form.last_name.as_field_group }}</div>
</div>

{{ form.email }} לבדו מציג רק את שדה הקלט: בלי תווית ובלי הודעת שגיאה שמסבירה מה השתבש.

בגיליון הסגנונות כבר יש כלל .field שהופך כל תיבה לכרטיס.

אתגר

קל

ב־new_event.html, החליפו את {{ form }} בלולאה שעוברת על השדות של הטופס. הציבו כל שדה בתוך <div class="field"> משלו, יחד עם התווית, השגיאות ושדה הקלט שלו.

מלאו את הכותרת ואת המקום, ושלחו את יום שישי הבא כתאריך: מופיעה ההודעה „יש להזין תאריך תקין.” בתוך כרטיס התאריך.

נסו בעצמכם

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

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

{% block content %}
<h1>Add an event</h1>
<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Add event</button>
</form>
{% endblock %}