Django Forms — важнейший компонент веб-разработки, который позволяет нам с легкостью создавать формы. Формы являются неотъемлемой частью многих веб-сайтов, используемых для сбора данных от пользователей. Django Forms предоставляет простой способ проверки и обработки этих данных. Однако базовая форма может быть простой и непривлекательной, из-за чего пользователи могут быстро потерять интерес. Поэтому важно настроить форму, чтобы сделать ее более привлекательной для пользователя. В этом сообщении блога мы шаг за шагом рассмотрим процесс создания пользовательской формы ввода с использованием Django Forms.

Шаг 1: Создание базовой формы Чтобы создать нашу индивидуальную форму, мы сначала создадим базовую форму. Для этого мы создадим проект Django и приложение. Затем мы создадим форму в нашем приложении, используя встроенный класс Django Form. Этот класс позволяет нам определить поля, которые будет содержать наша форма, а также правила проверки для каждого поля. Например, мы можем создать поле для имени пользователя и установить правило, что оно должно быть не менее трех символов. Мы также создадим представление, которое будет отображать нашу форму. Это представление отобразит HTML-шаблон, содержащий нашу форму. Наконец, мы добавим URL-адрес в конфигурацию URL-адреса проекта, чтобы связать нашу форму с URL-адресом.

Рассмотрим пример базовой формы. Предположим, мы хотим создать форму для отправки пользователями своей контактной информации. Мы можем создать класс ContactForm, который наследуется от встроенного класса Django Form. Этот класс будет иметь поля для имени пользователя, электронной почты и сообщения. Код этой формы может выглядеть примерно так:

from django import forms
class ContactForm(forms.Form):
    name = forms.CharField(label='Your name', max_length=100)
    email = forms.EmailField(label='Your email')
    message = forms.CharField(widget=forms.Textarea)

Шаг 2: Добавление полей в форму После создания базовой формы мы добавим в нее различные поля, такие как текст, электронная почта, пароль и т. д. Мы также добавим проверку полей, чтобы убедиться, что пользовательский ввод вводится правильно. формат. Кроме того, мы создадим настраиваемые поля для более сложных типов данных. Например, мы можем захотеть добавить поле номера телефона в нашу контактную форму. Мы можем сделать это, создав CharField с определенным шаблоном регулярного выражения, который соответствует телефонным номерам.

Давайте добавим поле номера телефона в наш класс ContactForm:

from django import forms
from django.core.validators import RegexValidator
class ContactForm(forms.Form):
    name = forms.CharField(label='Your name', max_length=100)
    email = forms.EmailField(label='Your email')
    phone_regex = RegexValidator(regex=r'^\+?1?\d{9,15}$',
                                 message="Phone number must be entered in the format: '+999999999'. Up to 15 digits allowed.")
    phone_number = forms.CharField(validators=[phone_regex], max_length=17, label='Your phone number')
    message = forms.CharField(widget=forms.Textarea)

Шаг 3: Стилизация формы Чтобы наша форма выглядела лучше, мы добавим в нее CSS. Мы можем создать отдельный файл CSS для нашей формы и связать его с нашим шаблоном HTML. Мы также можем использовать Bootstrap, популярный фреймворк CSS, для стилизации формы. Bootstrap предоставляет предопределенные классы CSS, которые мы можем использовать для стилизации элементов формы. Наконец, мы настроим внешний вид формы в соответствии с дизайном нашего веб-сайта. Вот пример стилизованной контактной формы: ![Стилизованная контактная форма](https://i.imgur.com/hjA54Ej.png)

Чтобы добавить CSS в нашу форму, мы создадим новый файл с именем forms.css внутри каталога static/css нашего проекта. Затем мы добавим ссылку на этот файл из нашего HTML-шаблона, добавив следующую строку в раздел <head>:

<link rel="stylesheet" href="{% static 'css/forms.css' %}">

Это говорит Django искать файл forms.css в каталоге static/css и включать его в наш HTML-шаблон.

Далее мы можем использовать Bootstrap для стилизации нашей формы. Мы добавим в наш проект необходимые файлы Bootstrap CSS и JavaScript, загрузив их с веб-сайта Bootstrap и включив в наш HTML-шаблон. В качестве альтернативы мы можем использовать сеть доставки контента (CDN) для загрузки файлов Bootstrap с удаленного сервера. Вот пример того, как включить Bootstrap из CDN:

<!-- Include Bootstrap CSS and JavaScript from a CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Наконец, мы можем настроить внешний вид формы, добавив собственные правила CSS. Например, мы можем изменить размер шрифта и цвет меток формы, добавить цвет фона к полям формы и настроить расстояние между элементами формы. Вот пример некоторых правил CSS, которые можно использовать для настройки внешнего вида формы:

/* Custom CSS for the contact form */
.form-group label {
    font-size: 16px;
    color: #333;
}
.form-control {
    background-color: #f8f8f8;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px;
}
.form-control:focus {
    background-color: #fff;
    box-shadow: none;
    outline: none;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 0;
}
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

Эти правила CSS будут применяться ко всем элементам формы с классами form-group, form-control и btn-primary соответственно. Мы можем настроить значения свойств CSS, чтобы настроить внешний вид нашей формы в соответствии с нашими предпочтениями. На следующем шаге мы узнаем о виджетах форм Django и о том, как их использовать для создания более настраиваемых входных данных формы.

Шаг 4: Использование виджетов форм Django

Виджеты форм Django — это типы ввода HTML, которые позволяют нам создавать настраиваемые поля ввода формы. Эти виджеты можно использовать для создания полей выбора, переключателей, флажков и других типов ввода формы. Django предоставляет несколько встроенных виджетов форм, в том числе:

  • Ввод текста
  • ввод пароля
  • Электронная почтаВвод
  • ФлажокВвод
  • Выбирать
  • Радиоселект
  • ФлажокВыбратьНесколько

Мы можем использовать эти встроенные виджеты, указав их в полях формы. Например, чтобы использовать виджет EmailInput, мы можем определить наше поле электронной почты следующим образом:

email = forms.EmailField(widget=forms.EmailInput(attrs={
    'class': 'form-control',
    'placeholder': 'Enter your email address'
}))

В этом примере мы используем виджет EmailInput и передаем ему некоторые атрибуты для настройки его внешнего вида. Мы устанавливаем для атрибута «класс» значение «form-control», который является классом Bootstrap, который добавляет некоторые стили к полю ввода. Мы также устанавливаем для атрибута «заполнитель» значение «Введите свой адрес электронной почты», что будет отображать некоторый текст-заполнитель внутри поля ввода.

Мы также можем создавать собственные виджеты, создавая подклассы встроенных виджетов или создавая совершенно новые виджеты. Вот пример пользовательского виджета, который отображает поле ввода текста с кнопкой «Поиск»:

class SearchWidget(forms.TextInput):
    template_name = 'search_widget.html'

В этом примере мы создаем подкласс виджета TextInput и указываем для него собственный шаблон. Шаблон может быть простым файлом HTML или шаблоном Django, который может содержать переменные и логику. Вот пример простого шаблона search_widget.html:

{% include "django/forms/widgets/input.html" %}
<button type="submit" class="btn btn-primary">Search</button>

Шаг 6. Обработка отправленных форм

Теперь, когда мы создали нашу форму, нам нужно знать, как обрабатывать отправку формы. Когда пользователь отправляет форму, нам нужно получить данные, введенные пользователем, и обработать их. В Django мы можем обрабатывать отправку форм в том же представлении, в котором отображается форма.

Давайте изменим наше представление contact для обработки отправки форм:

python Скопируйте код из django.shortcuts, импортируйте рендеринг, перенаправьте из django.contrib, импортируйте сообщения из .forms, импортируйте ContactForm

def contact(request): if request.method == 'POST': form = ContactForm(request.POST) if form.is_valid(): # Обработать данные формы name = form.cleaned_data['name'] email = form. clean_data['email'] message = form.cleaned_data['message'] # Отправить электронное письмо send_email(name, email, message) # Перенаправить на страницу успеха return redirect('success') else: form = ContactForm() return render (запрос, 'contact.html', {'форма': форма})

В этом модифицированном представлении мы сначала проверяем, является ли метод запроса POST, что указывает на то, что форма была отправлена. Затем мы создаем новый экземпляр ContactForm с данными POST. Если форма действительна, мы можем получить очищенные данные из формы и обработать их.

В этом случае мы отправляем электронное письмо с именем пользователя, электронной почтой и сообщением, используя функцию send_email. Затем мы перенаправляем пользователя на страницу успеха.

Если форма недействительна, мы просто отображаем тот же шаблон contact.html с экземпляром формы, чтобы пользователь мог исправить свой ввод.

Далее давайте создадим шаблон страницы успеха: html Скопируйте код {% extends ‘base.html’ %} {% block content %} ‹h1›Успех!‹/h1› ‹p›Спасибо, что связались с нами. Мы свяжемся с вами в ближайшее время.‹/p› {% endblock %} На следующем шаге мы узнаем, как сохранять данные формы в базе данных с помощью встроенных моделей Django.

Шаг 6: Сохранение данных формы в базе данных

Теперь, когда мы узнали, как обрабатывать отправку форм и извлекать данные из формы, мы можем сохранить данные формы в базе данных, используя встроенные модели Django.

Во-первых, нам нужно создать модель в файле models.py нашего приложения, чтобы определить поля, которые мы хотим сохранить в базе данных:

from django.db import models
class Contact(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    message = models.TextField()
    def __str__(self):
        return self.name

В этом примере мы определили модель Contact с тремя полями: name, email и message. Мы также определили метод __str__ для представления модели в виде строки в административном интерфейсе.

Далее нам нужно создать форму в файле forms.py нашего приложения для проверки и сохранения данных из формы в базу данных:

from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = ['name', 'email', 'message']

В этом примере мы создали класс ContactForm, который наследуется от класса ModelForm Django и использует модель Contact в качестве своей модели. Мы указали атрибут fields, чтобы включить только те поля, которые мы хотим включить в форму.

Наконец, нам нужно обновить наш файл views.py, чтобы сохранить данные формы в базу данных:

from django.shortcuts import render, redirect
from .forms import ContactForm
def contact(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('success')
    else:
        form = ContactForm()
    return render(request, 'contact.html', {'form': form})
def success(request):
    return render(request, 'success.html')

В этом примере мы добавили метод form.save() для сохранения данных формы в базе данных, если форма действительна. Мы также добавили представление success для отображения страницы успеха после отправки формы.

С этими изменениями данные нашей формы будут проверены и сохранены в базе данных при отправке формы. Затем мы можем получить доступ к данным в нашей базе данных через встроенный ORM Django.

В заключение, создание настраиваемых пользовательских форм ввода в Django является важным навыком для веб-разработчиков. В этом руководстве мы узнали, как создать базовую форму, добавить поля и проверку, стилизовать форму с помощью CSS и Bootstrap, использовать виджеты форм Django, обрабатывать отправленные формы и сохранять данные формы в базе данных с помощью встроенных моделей Django.

Следуя этим шагам, мы можем создавать формы, которые не только функциональны, но и эстетичны и соответствуют дизайну нашего веб-сайта. С помощью мощных функций Django создание пользовательских форм становится простым процессом.

Крайне важно помнить, что настраиваемые формы пользовательского ввода являются важным аспектом многих веб-сайтов и приложений. Поэтому важно убедиться, что формы не только удобны для пользователя, но также безопасны и точно обрабатывают данные.

Используя встроенные формы, виджеты и модели Django, мы можем создавать безопасные и точные формы для обработки данных. Мы рекомендуем вам поэкспериментировать с различными типами форм и виджетов, чтобы создать пользовательские формы ввода, соответствующие потребностям вашего проекта.

Мы надеемся, что это руководство помогло вам понять процесс создания пользовательских форм ввода в Django. Помните, что всегда есть ресурсы для дальнейшего обучения, и мы рекомендуем вам продолжить изучение документации Django, чтобы улучшить свои навыки.