Виджет NumberInput

Виджет NumberInput применяется для отображения поля ввода числовых значений в формах Django. Он генерирует HTML-элемент <input type="number">, который обеспечивает встроенную валидацию чисел на стороне браузера и удобные элементы управления для увеличения или уменьшения значения. Виджет поддерживает атрибуты min, max и step для ограничения допустимых значений.

Синтаксис

pythonfrom django import forms
from django.forms.widgets import NumberInput

class MyForm(forms.Form):
  age = forms.IntegerField(widget=NumberInput(attrs={'min': 1, 'max': 100}))

Пример

Создадим форму для ввода возраста пользователя с ограничением от 18 до 65 лет:

pythonfrom django import forms
from django.forms.widgets import NumberInput

class UserAgeForm(forms.Form):
  age = forms.IntegerField(
    label="Ваш возраст",
    widget=NumberInput(attrs={
      'min': 18,
      'max': 65,
      'class': 'form-control',
      'placeholder': 'Введите возраст'
    })
  )

Результат HTML-рендеринга формы:

html<input type="number" name="age" min="18" max="65" 
     class="form-control" placeholder="Введите возраст" 
     id="id_age">

Пример

Использование виджета в ModelForm для модели продукта с ценой и скидкой:

pythonfrom django import forms
from django.forms.widgets import NumberInput
from myapp.models import Product

class ProductForm(forms.ModelForm):
  class Meta:
    model = Product
    fields = ['name', 'price', 'discount']
    widgets = {
      'price': NumberInput(attrs={
        'min': 0.01,
        'step': 0.01,
        'class': 'price-input'
      }),
      'discount': NumberInput(attrs={
        'min': 0,
        'max': 100,
        'step': 1,
        'class': 'discount-input'
      }),
    }

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

html<input type="number" name="price" min="0.01" step="0.01" 
     class="price-input" id="id_price">
<input type="number" name="discount" min="0" max="100" step="1" 
     class="discount-input" id="id_discount">

Пример

Обработка данных и валидация в представлении для формы с числовым полем:

pythonfrom django.shortcuts import render
from django.http import HttpResponseRedirect
from django import forms
from django.forms.widgets import NumberInput

class TemperatureForm(forms.Form):
  temperature = forms.FloatField(
    label="Температура (°C)",
    widget=NumberInput(attrs={
      'min': -50,
      'max': 50,
      'step': 0.5,
      'class': 'temp-input'
    })
  )

def temperature_view(request):
  if request.method == 'POST':
    form = TemperatureForm(request.POST)
    if form.is_valid():
      temp = form.cleaned_data['temperature']
      if temp > 30:
        message = "Жарко! Рекомендуем кондиционер."
      elif temp < 0:
        message = "Холодно! Одевайтесь теплее."
      else:
        message = "Комфортная температура."
      return render(request, 'result.html', {'message': message})
  else:
    form = TemperatureForm()
  return render(request, 'temperature.html', {'form': form})

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

python"Жарко! Рекомендуем кондиционер."

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

  • виджет TextInput,
    используемый для ввода текстовых данных
  • виджет DateInput,
    используемый для ввода дат
  • виджет DateTimeInput,
    используемый для ввода даты и времени
  • поле IntegerField,
    которое часто используется с NumberInput для целых чисел