Menu
CoddyTech

Form Çizimi

Coddy'nin Django Journey'sinin Formlar bölümünün bir parçası. Ders 6 / 20.

/events/new/ adresindeki sayfa her etiketi ve girdi alanını elle yazıyor, EventForm da aynı alanları yeniden listeliyor. Bir form kendini oluşturabilir: şablona bir form iletin ve <form> etiketinin içine {{ form }} yazın. Bir iletişim sayfası:

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

{{ form }}, sınıfın alanları tanımladığı sırayla her alan için bir etiket ve girdi alanı oluşturur. Her girdi alanına alanın name değeri ve id_email gibi bir id verilir; böylece etiketi bu alanı işaret eder. Form etiketi, belirteç ve düğme size aittir.

Henüz içine hiçbir şey yazılmamış bir form, sınıfın veri olmadan çağrılmasıdır: ContactForm(). Django ayrıca zorunlu girdi alanlarını required ile işaretler; böylece tarayıcı, gönderimden önce boş bir alanı durdurur. Django bir DateField alanını metin olarak oluşturduğu için tarih kutusu artık düz metindir. Tarihleri 2031-12-05 gibi yazın.

challenge icon

Görev

Kolay

EventForm kendi alanlarını oluştursun.

  1. new_event içinde, boş bir EventForm'u şablona form olarak gönder.
  2. new_event.html içinde, üç etiketi ve giriş alanını {{ form }} ile değiştir; bunları senin için oluşturur. Form etiketini, belirteci, düğmeyi ve hata mesajını koru.

2031-12-05 tarihli bir etkinlik ekle: Django tüm etiketleri oluşturur ve etkinlik sayfasına yönlendirilirsin.

Kendin dene

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

Formlar bölümündeki tüm dersler

Kendi başına pratik yap: Django playground