Виджет NumberInput

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

Синтаксис

from 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 лет:

from 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-рендеринга формы:

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

Пример

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

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

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

<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">

Пример

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

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

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

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

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

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