Виджет EmailInput

Виджет EmailInput применяется в формах Django для создания поля ввода электронной почты. Он наследуется от TextInput и добавляет специальный атрибут type="email" в HTML-код, что позволяет браузерам проверять формат email на стороне клиента. Этот виджет также позволяет задавать дополнительные атрибуты, такие как placeholder, maxlength и другие, через параметр attrs.

Синтаксис

from django import forms

class MyForm(forms.Form):
	email = forms.EmailField(widget=forms.EmailInput(attrs={
		'placeholder': 'Введите email',
		'class': 'form-control',
		'maxlength': 150
	}))

Пример

Создадим форму для подписки на новости с использованием виджета EmailInput:

from django import forms

class SubscribeForm(forms.Form):
	email = forms.EmailField(
		label='Email',
		widget=forms.EmailInput(attrs={
			'placeholder': 'your@email.com',
			'class': 'email-field'
		})
	)
	agree = forms.BooleanField(label='Согласие на рассылку')

Пример

Использование виджета EmailInput с дополнительными параметрами для настройки внешнего вида:

from django import forms

class ContactForm(forms.Form):
	name = forms.CharField(max_length=50)
	email = forms.EmailField(
		widget=forms.EmailInput(attrs={
			'class': 'input-large',
			'id': 'contact-email',
			'required': 'required',
			'size': 40
		})
	)
	message = forms.CharField(widget=forms.Textarea)

Пример

Отображение формы в шаблоне с использованием метода as_p:

# views.py
from django.shortcuts import render
from .forms import SubscribeForm

def subscribe_view(request):
	if request.method == 'POST':
		form = SubscribeForm(request.POST)
		if form.is_valid():
			email = form.cleaned_data['email']
			return render(request, 'success.html', {'email': email})
	else:
		form = SubscribeForm()
	return render(request, 'subscribe.html', {'form': form})

В шаблоне subscribe.html форма будет выглядеть следующим образом:

<form method="post">
	{% csrf_token %}
	{{ form.as_p }}
	<button type="submit">Подписаться</button>
</form>

Пример

Настройка виджета EmailInput для работы с классами CSS-фреймворка Bootstrap:

from django import forms

class UserProfileForm(forms.Form):
	username = forms.CharField(max_length=30)
	email = forms.EmailField(
		label='E-Mail Address',
		widget=forms.EmailInput(attrs={
			'class': 'form-control',
			'placeholder': 'Enter your email',
			'aria-describedby': 'email-help'
		})
	)
	age = forms.IntegerField(min_value=18, max_value=100)

# Использование в view
def profile_view(request):
	form = UserProfileForm()
	return render(request, 'profile.html', {'form': form})

Результат рендеринга поля email:

<input type="email" name="email"
	   class="form-control"
	   placeholder="Enter your email"
	   aria-describedby="email-help"
	   id="id_email">

Пример

Валидация email с использованием виджета EmailInput и кастомного валидатора:

from django import forms
from django.core.validators import EmailValidator

class CustomEmailForm(forms.Form):
	email = forms.EmailField(
		widget=forms.EmailInput(attrs={'class': 'custom-email'}),
		validators=[
			EmailValidator(
				message='Введите корректный email адрес',
				code='invalid_email'
			)
		]
	)

# Проверка формы
form = CustomEmailForm({'email': 'invalid-email'})
print(form.is_valid())
print(form.errors)

Результат выполнения кода:

False
{'email': ['Введите корректный email адрес']}

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

виджет TextInput,
который является базовым для создания текстовых полей
виджет URLInput,
который предназначен для ввода URL-адресов
виджет PasswordInput,
который скрывает вводимый текст
поле EmailField,
которое использует данный виджет по умолчанию