Виджет EmailInput

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

Синтаксис

pythonfrom django import forms

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

Пример

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

pythonfrom 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 с дополнительными параметрами для настройки внешнего вида:

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

python# 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 форма будет выглядеть следующим образом:

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

Пример

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

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

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

Пример

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

pythonfrom 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)

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

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

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