폼 그리기

Coddy Django 여정의 폼 섹션에 포함된 레슨. 20개 중 6번째.

/events/new/ 페이지는 모든 라벨과 입력란을 일일이 작성하며, EventForm에도 같은 필드가 다시 나열되어 있습니다. 폼은 직접 그릴 수 있습니다. 템플릿에 폼을 전달하고 <form> 태그 안에 {{ form }}을 작성하세요. 연락처 페이지의 예입니다.

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

{{ form }}은 클래스에 선언된 순서대로 각 필드의 라벨과 입력란을 작성합니다. 각 입력란에는 필드의 name과 id_email 같은 id가 지정되어 라벨이 해당 입력란을 가리킵니다. 폼 태그와 토큰, 버튼은 직접 작성해야 합니다.

아직 아무것도 입력하지 않은 폼은 데이터 없이 호출한 클래스입니다. 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 %}