@@ -77,6 +77,21 @@ If you prefer to apply the Bootstrap styles on a form to form basis, include the
77
77
{{ form(form) }}
78
78
{% endblock %}
79
79
80
+ Error Messages
81
+ --------------
82
+
83
+ Form errors are rendered **inside ** the ``<label> `` element to make sure there
84
+ is a strong connection between the error and its ``<input> ``, as required by the
85
+ `WCAG 2.0 standard `_. To achieve this, ``form_errors() `` is called by
86
+ ``form_label() `` internally. So you shouldn't use ``form_errors() `` at all; if you
87
+ do, you'll get the error messages displayed *twice *.
88
+
89
+ Checkboxes and Radios
90
+ ---------------------
91
+
92
+ For a checkbox/radio field, calling ``form_label() `` doesn't render anything. Due to
93
+ Bootstrap internals, the label is already rendered by ``form_widget() ``.
94
+
80
95
Accessibility
81
96
-------------
82
97
@@ -100,16 +115,5 @@ and ``checkbox-custom`` respectively.
100
115
{{ form_row(form.myRadio, {label_attr: {class: 'radio-custom'} }) }}
101
116
{{ form_row(form.myCheckbox, {label_attr: {class: 'checkbox-custom'} }) }}
102
117
103
- Labels and Errors
104
- -----------------
105
-
106
- When you use the Bootstrap form themes and render the fields manually, calling
107
- ``form_label() `` for a checkbox/radio field doesn't render anything. Due to Bootstrap
108
- internals, the label is already rendered by ``form_widget() ``.
109
-
110
- Form errors are rendered **inside ** the ``<label> `` element to make sure there
111
- is a strong connection between the error and its ``<input> ``, as required by the
112
- `WCAG 2.0 standard `_.
113
-
114
118
.. _`WCAG 2.0 standard` : https://www.w3.org/TR/WCAG20/
115
119
.. _`custom forms` : https://getbootstrap.com/docs/4.4/components/forms/#custom-forms
0 commit comments