Menu
CoddyTech

Criando um formulário

Parte da seção Forms do Journey de Django da Coddy. Lição 6 de 20.

A página em /events/new/ escreve cada rótulo e campo de entrada manualmente, e EventForm lista os mesmos campos novamente. Um formulário pode ser renderizado por conta própria: passe um para o template e escreva {{ form }} dentro da tag <form>. Uma página de contato:

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

{{ form }} escreve um rótulo e um campo de entrada para cada campo, na ordem em que a classe os declara. Cada campo de entrada recebe o name do campo e um id como id_email, para que o rótulo aponte para ele. A tag do formulário, o token e o botão continuam sob seu controle.

Um formulário em que ainda não foi digitado nada é a classe chamada sem dados: ContactForm(). O Django também marca os campos de entrada obrigatórios com required, para que o navegador impeça o envio de um campo vazio. Agora, o campo de data é texto simples, porque o Django renderiza um DateField como texto. Digite datas como 2031-12-05.

challenge icon

Desafio

Fácil

Deixe EventForm renderizar os próprios campos.

  1. Em new_event, passe um EventForm vazio para o template como form.
  2. Em new_event.html, substitua os três rótulos e campos de entrada por {{ form }}, que os gera para você. Mantenha a tag do formulário, o token, o botão e a mensagem de erro.

Adicione um evento com data de 2031-12-05: o Django gerou todos os rótulos, e você chega à página do evento.

Experimente você mesmo

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

Todas as lições de Forms

Pratique por conta própria: Playground de Django