Menu
CoddyTech

Menggambar Formulir

Termasuk bagian Formulir dalam perjalanan Django di Coddy. Pelajaran 6 dari 20.

Halaman di /events/new/ menulis setiap label dan input secara manual, dan EventForm mencantumkan field yang sama lagi. Sebuah form dapat menggambar dirinya sendiri: teruskan form ke template dan tulis {{ form }} di dalam tag <form>. Halaman kontak:

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

{{ form }} menulis label dan input untuk setiap field, sesuai urutan yang ditetapkan oleh class. Setiap input mendapat name field dan id seperti id_email, sehingga labelnya mengarah ke input tersebut. Tag form, token, dan tombol tetap kamu tentukan sendiri.

Form yang belum berisi apa pun adalah class yang dipanggil tanpa data: ContactForm(). Django juga menandai input wajib dengan required, sehingga browser menghentikan pengiriman jika ada field kosong.

challenge icon

Tantangan

Mudah
  • Di new_event, teruskan EventForm kosong ke template sebagai form.
  • Di new_event.html, ganti label dan input dengan form yang digambar sendiri. Pertahankan tag form, token, tombol, dan pesan error.

Tekan Jalankan dan buka /events/new/: Django menggambar kolom-kolom formulir.

Coba sendiri

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

Semua pelajaran di Formulir

Latihan sendiri: Playground Django