diff options
Diffstat (limited to 'docs/ref')
| -rw-r--r-- | docs/ref/forms/widgets.txt | 85 |
1 files changed, 47 insertions, 38 deletions
diff --git a/docs/ref/forms/widgets.txt b/docs/ref/forms/widgets.txt index 76f7704690..bf38408368 100644 --- a/docs/ref/forms/widgets.txt +++ b/docs/ref/forms/widgets.txt @@ -727,28 +727,34 @@ that specifies the template used to render each choice. For example, for the .. code-block:: html+django - {% for radio in myform.beatles %} - <div class="myradio"> - {{ radio }} - </div> - {% endfor %} + <fieldset> + <legend>{{ myform.beatles.label }}</legend> + {% for radio in myform.beatles %} + <div class="myradio"> + {{ radio }} + </div> + {% endfor %} + </fieldset> This would generate the following HTML: .. code-block:: html - <div class="myradio"> - <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" required> John</label> - </div> - <div class="myradio"> - <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required> Paul</label> - </div> - <div class="myradio"> - <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" required> George</label> - </div> - <div class="myradio"> - <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required> Ringo</label> - </div> + <fieldset> + <legend>Radio buttons</legend> + <div class="myradio"> + <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" required> John</label> + </div> + <div class="myradio"> + <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required> Paul</label> + </div> + <div class="myradio"> + <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" required> George</label> + </div> + <div class="myradio"> + <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required> Ringo</label> + </div> + </fieldset> That included the ``<label>`` tags. To get more granular, you can use each radio button's ``tag``, ``choice_label`` and ``id_for_label`` attributes. @@ -756,36 +762,39 @@ that specifies the template used to render each choice. For example, for the .. code-block:: html+django - {% for radio in myform.beatles %} + <fieldset> + <legend>{{ myform.beatles.label }}</legend> + {% for radio in myform.beatles %} <label for="{{ radio.id_for_label }}"> {{ radio.choice_label }} <span class="radio">{{ radio.tag }}</span> </label> - {% endfor %} + {% endfor %} + </fieldset> ...will result in the following HTML: .. code-block:: html - <label for="id_beatles_0"> - John - <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" required></span> - </label> - - <label for="id_beatles_1"> - Paul - <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required></span> - </label> - - <label for="id_beatles_2"> - George - <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" required></span> - </label> - - <label for="id_beatles_3"> - Ringo - <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required></span> - </label> + <fieldset> + <legend>Radio buttons</legend> + <label for="id_beatles_0"> + John + <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" required></span> + </label> + <label for="id_beatles_1"> + Paul + <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required></span> + </label> + <label for="id_beatles_2"> + George + <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" required></span> + </label> + <label for="id_beatles_3"> + Ringo + <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required></span> + </label> + </fieldset> If you decide not to loop over the radio buttons -- e.g., if your template includes ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>`` with |