class RadioSelect
[source]
Similar to Select
, but rendered as a list of radio buttons within <li>
tags:
<ul> <li><input type='radio' name='...'></li> ... </ul>
For more granular control over the generated markup, you can loop over the radio buttons in the template. Assuming a form myform
with a field beatles
that uses a RadioSelect
as its widget:
{% for radio in myform.beatles %} <div class="myradio"> {{ radio }} </div> {% endfor %}
This would generate the following 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>
That included the <label>
tags. To get more granular, you can use each radio button’s tag
, choice_label
and id_for_label
attributes. For example, this template...
{% for radio in myform.beatles %} <label for="{{ radio.id_for_label }}"> {{ radio.choice_label }} <span class="radio">{{ radio.tag }}</span> </label> {% endfor %}
...will result in the following 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>
If you decide not to loop over the radio buttons – e.g., if your template simply includes {{ myform.beatles }}
– they’ll be output in a <ul>
with <li>
tags, as above.
The outer <ul>
container receives the id
attribute of the widget, if defined, or BoundField.auto_id
otherwise.
When looping over the radio buttons, the label
and input
tags include for
and id
attributes, respectively. Each radio button has an id_for_label
attribute to output the element’s ID.
Please login to continue.