Виджет TextInput

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

Синтаксис

from django import forms

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

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

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

from 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:

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

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

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

from 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})

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

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

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

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

from 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})

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

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

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

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

from 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})

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

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

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

виджет Textarea,
который создает многострочное поле ввода текста
виджет PasswordInput,
который скрывает вводимые символы
виджет EmailInput,
который оптимизирован для ввода email-адресов
поле CharField,
которое использует этот виджет по умолчанию