Provided widgets¶
Default widgets for form fields¶
The first column represents the name of a django.forms
field. FloppyForms
aims to implement all the Django fields with the same class name, in the
floppyforms
namespace.
Fields | Widgets | Specificities |
---|---|---|
BooleanField | CheckboxInput | |
CharField | TextInput | |
ComboField | TextInput | |
ChoiceField | Select | |
TypedChoiceField | Select | |
FilePathField | Select | |
ModelChoiceField | Select | |
DateField | DateInput | <input type=”date”> |
DateTimeField | DateTimeInput | <input type=”datetime”> |
DecimalField | NumberInput | <input type=”number”> |
EmailField | EmailInput | <input type=”email”> |
FileField | ClearableFileInput | |
FloatField | NumberInput | <input type=”number”> |
ImageField | ClearableFileInput | |
IntegerField | NumberInput | <input type=”number”> |
MultipleChoiceField | SelectMultiple | |
TypedMultipleChoiceField | SelectMultiple | |
ModelMultipleChoiceField | SelectMultiple | |
NullBooleanField | NullBooleanSelect | |
TimeField | TimeInput | <input type=”time”> |
URLField | URLInput | <input type=”url”> |
SlugField | SlugInput | <input pattern=”[-\w]+”> |
RegexField | TextInput | <input [pattern=...]> |
IPAddressField | IPAddressInput | <input pattern=...> |
GenericIPAddressField | TextInput | |
MultiValueField | None (abstract) | |
SplitDateTimeField | SplitDateTimeWidget |
Note
Textarea
The Textarea
widget renders a <textarea>
HTML element and is
available with django-floppyforms. It doesn’t appear on the table above
since no field has it as a default widget.
Note
RegexField
In Django, RegexField
takes a required regex
argument. The version
shipped in floppyforms also takes an optional js_regex
argument, for
client-side validation of the regex. The js_regex
must be a regex
written in javascript syntax. Example:
class RegexForm(forms.Form):
re_field = forms.RegexField(r'^\d{3}-[a-z]+$', # regex
'\d{3}-[a-z]+') # js_regex
If you don’t provide the js_regex
argument, there will be no
client-side validation of the field. Although the the two versions of the
regex may be identical, the distinction allows you to pass compiled
regexes as a regex
argument.
Extra widgets¶
Django provides “extra” widgets in django.forms.extras.widgets
. In fact, a
single extra widget is implemented: SelectDateWidget
. The template-based
version is available under the floppyforms.SelectDateWidget
name.
By defaut, this widget with split the date into three select (year, month and day). You can overload the template so that it is displayed in a different order or with 3 inputs:
<input type="text" name="{{ day_field }}" value="{{ day_val|stringformat:"02d" }}" id="{{ day_id }}"{% for attr in attrs.items %} {{ attr.0 }}="{{ attr.1 }}"{% endfor %} />
<input type="text" name="{{ month_field }}" value="{{ month_val|stringformat:"02d" }}" id="{{ month_id }}"{% for attr in attrs.items %} {{ attr.0 }}="{{ attr.1 }}"{% endfor %}/>
<input type="text" name="{{ year_field }}" value="{{ year_val|stringformat:"04d" }}" id="{{ year_id }}"{% for attr in attrs.items %} {{ attr.0 }}="{{ attr.1 }}"{% endfor %}/>
Other (HTML5) widgets¶
Some HTML5 widgets are also provided, although browser support may not be there yet:
SearchInput
: a widget that renders<input type="search">
.ColorInput
:<input type="color">
(currently only supported by Chrome 20+ and Opera 11+).RangeInput
:<input type="range">
, for sliders instead of spinboxes for numbers.PhoneNumberInput
:<input type="tel">
. For phone numbers.
You can easily check browser support for the various (HTML5) input types on caniuse.com.