1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form, render_field, render_form_row %}
{% block content %}
<h2>Example Form</h2>
<pre>
class ExampleForm(FlaskForm):
date = DateField(description="We'll never share your email with anyone else.") # add help text with `description`
datetime = DateTimeField(render_kw={'placeholder': 'this is a placeholder'}) # add HTML attribute with `render_kw`
datetimelocal = DateTimeLocalField()
time = TimeField()
month = MonthField()
floating = FloatField()
integer = IntegerField()
decimalslider = DecimalRangeField()
integerslider = IntegerRangeField(render_kw={'min': '0', 'max': '4'})
email = EmailField()
url = URLField()
telephone = TelField()
image = FileField(render_kw={'class': 'my-class'}, validators=[Regexp('.+\.jpg$')]) # add your class
option = RadioField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
select = SelectField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
selectmulti = SelectMultipleField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
bio = TextAreaField()
search = SearchField() # will autocapitalize on mobile
title = StringField() # will not autocapitalize on mobile
secret = PasswordField()
remember = BooleanField('Remember me')
submit = SubmitField()</pre>
{{ render_form(example_form) }}
<h2>Render a form with render_form</h2>
<pre>{% raw %}{{ render_form(form) }}{% endraw %}</pre>
{{ render_form(form) }}
<h2>Custom buttons with button_style and button_size</h2>
<pre>{% raw %}{{ render_form(form, button_style='success', button_size='block') }}{% endraw %}</pre>
{{ render_form(form, button_style='success', button_size='block') }}
<h2>Custom buttons with button_map</h2>
<pre>{% raw %}{{ render_form(button_form, button_map={'submit': 'primary', 'cancel': 'secondary', 'delete': 'danger'}) }}{% endraw %}</pre>
{{ render_form(button_form, button_map={'submit': 'primary', 'cancel': 'secondary', 'delete': 'danger'}) }}
<h2>Render a form field with render_field</h2>
<pre>{% raw %}
{{ render_field(form.username) }}
{{ render_field(form.password) }}
{{ render_field(form.remember) }}
{{ render_field(form.submit) }}
{% endraw %}</pre>
<form method="post">
{{ form.csrf_token }}
{{ render_field(form.username) }}
{{ render_field(form.password) }}
{{ render_field(form.remember) }}
{{ render_field(form.submit) }}
</form>
<h2>Render a form with render_form_row</h2>
<pre>{% raw %}
{{ render_form_row([form.username, form.password]) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-6', 'password': 'col-md-4'}) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-2', 'password': 'col-md-8'}) }}
{{ render_form_row([form.username, form.password], col_class_default='col-md-2') }}
{{ render_form_row([form.remember]) }}
{{ render_form_row([form.submit]) }}
{% endraw %}</pre>
<form method="post">
{{ form.csrf_token }}
{{ render_form_row([form.username, form.password]) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-6', 'password': 'col-md-4'}) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-2', 'password': 'col-md-8'}) }}
{{ render_form_row([form.username, form.password], col_class_default='col-md-2') }}
{{ render_form_row([form.remember]) }}
{{ render_form_row([form.submit]) }}
</form>
<h2>Test FormField and FormField</h2>
<h2>Telephone Form</h2>
{{ render_form(telephone_form) }}
<h2>IM Form</h2>
{{ render_form(im_form) }}
<h2>Contact Form</h2>
{{ render_form(contact_form) }}
{% endblock %}
|
