폼 그리기

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도 표시하므로, 브라우저가 빈 필드의 내용이 전송되기 전에 제출을 막습니다.

챌린지

쉬움

new_event에서 빈 EventForm을 form으로 템플릿에 전달하세요.
new_event.html에서 레이블과 입력 필드를 폼 자체를 렌더링하는 코드로 바꾸세요. 폼 태그, 토큰, 버튼, 오류 메시지는 그대로 두세요.

실행을 누르고 /events/new/를 여세요. 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 %}