Từng trường một

Thuộc phần Biểu mẫu trong hành trình Django của Coddy. Bài học 8 trên 20.

{{ form }} hiển thị mọi trường theo cùng một cách, trường này bên dưới trường kia. Để đặt từng trường vào một hộp riêng, hãy hiển thị lần lượt từng trường.

Biểu mẫu là danh sách các trường của nó: {% for field in form %} trả về các trường theo thứ tự mà lớp khai báo. {{ field.as_field_group }} hiển thị một trường cùng với nhãn, lỗi và ô nhập liệu. Trang đăng ký có hai tên nằm cạnh nhau:

<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 }} khi đứng riêng chỉ hiển thị ô nhập liệu, không có nhãn hay thông báo lỗi để cho biết vấn đề là gì.

Bảng định kiểu đã có quy tắc .field để biến mỗi hộp thành một thẻ.

Thử thách

Dễ

Trong new_event.html, thay {{ form }} bằng một vòng lặp qua các trường của biểu mẫu. Đặt mỗi trường trong một <div class="field"> riêng, cùng với nhãn, lỗi và ô nhập liệu.

Điền tiêu đề và địa điểm, rồi nhập thứ Sáu tuần sau làm ngày: Enter a valid date. xuất hiện bên trong thẻ Date.

Tự làm thử

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