From e427955ddd215d1ed4669560ddac015f4a3a5c24 Mon Sep 17 00:00:00 2001
From: Thomas Landauer <thomas@landauer.at>
Date: Mon, 30 Mar 2020 15:12:36 +0200
Subject: [PATCH] Moving the "On the rendered page" paragraph upwards

---
 form/form_collections.rst | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/form/form_collections.rst b/form/form_collections.rst
index d5d26a873eb..a5ce6c2facd 100644
--- a/form/form_collections.rst
+++ b/form/form_collections.rst
@@ -280,6 +280,17 @@ new "tag" forms. To render it, make the following change to your template:
         ...
     </ul>
 
+On the rendered page, the result will look something like this:
+
+.. code-block:: html
+
+    <ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
+
+.. seealso::
+
+    If you want to customize the HTML code in the prototype, see
+    :ref:`form-custom-prototype`.
+
 .. note::
 
     If you render your whole "tags" sub-form at once (e.g. ``form_row(form.tags)``),
@@ -298,12 +309,6 @@ new "tag" forms. To render it, make the following change to your template:
 
         {{ form_widget(form.tags.vars.prototype.name)|e }}
 
-On the rendered page, the result will look something like this:
-
-.. code-block:: html
-
-    <ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
-
 The goal of this section will be to use JavaScript to read this attribute
 and dynamically add new tag forms when the user clicks a "Add a tag" link.
 To make things simple, this example uses jQuery and assumes you have it included
@@ -389,11 +394,6 @@ into new ``Tag`` objects and added to the ``tags`` property of the ``Task`` obje
 
     You can find a working example in this `JSFiddle`_.
 
-.. seealso::
-
-    If you want to customize the HTML code in the prototype, read
-    :ref:`form-custom-prototype`.
-
 To make handling these new tags easier, add an "adder" and a "remover" method
 for the tags in the ``Task`` class::