Виджет TextInput

Виджет TextInput применяется к полям форм Django и генерирует HTML-элемент <input type="text"> для ввода текстовых данных. Виджет наследуется от базового класса Widget и предоставляет стандартные атрибуты для настройки внешнего вида и поведения поля ввода. Основные параметры включают атрибуты attrs для задания HTML-атрибутов, input_type для указания типа поля и методы для рендеринга виджета в HTML-код.

Синтаксис

pythonfrom django import forms

class MyForm(forms.Form):
  field_name = forms.CharField(
    widget=forms.TextInput(attrs={'class': 'my-class', 'placeholder': 'Введите текст'})
  )

Пример . С использованием атрибутов

Давайте создадим форму с полем для ввода имени пользователя и добавим дополнительные HTML-атрибуты:

pythonfrom django import forms

class UserForm(forms.Form):
  username = forms.CharField(
    label="Имя пользователя",
    max_length=50,
    widget=forms.TextInput(attrs={
      'class': 'form-control',
      'placeholder': 'Введите имя пользователя',
      'id': 'username-field',
      'required': 'true'
    })
  )

Результат рендеринга виджета в HTML:

python<input type="text" name="username" 
     class="form-control" 
     placeholder="Введите имя пользователя" 
     id="username-field" 
     required="true" 
     maxlength="50">

Пример . Обработка данных формы

Давайте создадим полноценный пример с обработкой данных из поля ввода в представлении:

pythonfrom django import forms
from django.shortcuts import render
from django.http import HttpResponse

class ContactForm(forms.Form):
  email = forms.EmailField(
    label="Email",
    widget=forms.TextInput(attrs={
      'class': 'email-input',
      'placeholder': 'example@mail.com'
    })
  )
  subject = forms.CharField(
    label="Тема",
    widget=forms.TextInput(attrs={
      'class': 'subject-input',
      'placeholder': 'Введите тему сообщения'
    })
  )

def contact_view(request):
  if request.method == 'POST':
    form = ContactForm(request.POST)
    if form.is_valid():
      email = form.cleaned_data['email']
      subject = form.cleaned_data['subject']
      return HttpResponse(f"Получено сообщение от {email} с темой '{subject}'")
  else:
    form = ContactForm()
  return render(request, 'contact.html', {'form': form})

Результат обработки формы при успешной отправке:

python"Получено сообщение от user@example.com с темой 'Привет, Django!'"

Пример . Использование с ModelForm

Давайте создадим форму на основе модели и настроим виджет для поля:

pythonfrom django.db import models
from django import forms

class Article(models.Model):
  title = models.CharField(max_length=200)
  content = models.TextField()
  author = models.CharField(max_length=100)

  def __str__(self):
    return self.title

class ArticleForm(forms.ModelForm):
  class Meta:
    model = Article
    fields = ['title', 'content', 'author']
    widgets = {
      'title': forms.TextInput(attrs={
        'class': 'title-input',
        'placeholder': 'Введите заголовок статьи'
      }),
      'author': forms.TextInput(attrs={
        'class': 'author-input',
        'placeholder': 'Введите имя автора'
      }),
    }

# Использование формы в представлении
def create_article(request):
  if request.method == 'POST':
    form = ArticleForm(request.POST)
    if form.is_valid():
      article = form.save()
      return HttpResponse(f"Статья '{article.title}' успешно создана")
  else:
    form = ArticleForm()
  return render(request, 'create_article.html', {'form': form})

Результат создания статьи:

python"Статья 'Введение в Django' успешно создана"

Пример . Динамическая настройка виджета

Давайте изменим атрибуты виджета динамически в зависимости от условий:

pythonfrom django import forms

class DynamicForm(forms.Form):
  search = forms.CharField(
    label="Поиск",
    required=False,
    widget=forms.TextInput(attrs={
      'class': 'search-input',
      'type': 'search'
    })
  )

def get_form_with_placeholder(request):
  form = DynamicForm()
  # Изменяем атрибуты виджета динамически
  form.fields['search'].widget.attrs.update({
    'placeholder': 'Поиск по сайту',
    'autofocus': 'true'
  })
  return render(request, 'search.html', {'form': form})

Результат рендеринга поля с динамически добавленными атрибутами:

python<input type="search" name="search" 
     class="search-input" 
     placeholder="Поиск по сайту" 
     autofocus="true">

Смотрите также