@@ -77,6 +77,21 @@ If you prefer to apply the Bootstrap styles on a form to form basis, include the
7777 {{ form(form) }}
7878 {% endblock %}
7979
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+
8095Accessibility
8196-------------
8297
@@ -100,16 +115,5 @@ and ``checkbox-custom`` respectively.
100115 {{ form_row(form.myRadio, {label_attr: {class: 'radio-custom'} }) }}
101116 {{ form_row(form.myCheckbox, {label_attr: {class: 'checkbox-custom'} }) }}
102117
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-
114118 .. _`WCAG 2.0 standard` : https://www.w3.org/TR/WCAG20/
115119.. _`custom forms` : https://getbootstrap.com/docs/4.4/components/forms/#custom-forms
0 commit comments