Menu
CoddyTech

Pole po polu

Część sekcji Formularze ścieżki Django w Coddy. Lekcja 8 z 20.

{{ form }} rysuje każde pole w ten sam sposób, jedno pod drugim. Aby umieścić każde pole we własnym polu, rysuj pola pojedynczo.

Formularz to lista jego pól: {% for field in form %} podaje je w kolejności określonej przez klasę. {{ field.as_field_group }} rysuje jedno pole wraz z etykietą, błędami i polem wejściowym. Strona rejestracji z dwoma imionami obok siebie:

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

Samo {{ form.email }} rysuje tylko pole wejściowe: bez etykiety i bez komunikatu o błędzie informującego, co poszło nie tak.

Arkusz stylów zawiera już regułę .field, która zmienia każde pole w kartę.

challenge icon

Wyzwanie

Łatwy

W pliku new_event.html zastąp {{ form }} pętlą przechodzącą po polach formularza. Umieść każde pole we własnym elemencie <div class="field"> wraz z etykietą, błędami i polem wejściowym.

Naciśnij Run, prześlij datę next friday i znajdź błąd w polu daty.

Spróbuj swoich sił

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

Wszystkie lekcje w sekcji Formularze

Poćwicz samodzielnie: Edytor online Django