【Django】ChoiceFiledでラジオボタンを横並びに出力する方法(ulとli要素を除外して描画)

2021年5月2日

Contents

1 概要
2 背景
3 解決方法

概要

DjangoでChoiceFiledを使用したFormでRadioButtonを描画する際に、ulとli要素を使用せずに横並びに出力する方法のメモです。
通常のお作法で出力すると、下図のような縦に並ぶラジオボタンのようになってしまうものを、横並びに出力する方法の紹介になります。

Before

After

背景

DjangoのModelおよびFormにおいて、ChoiceFieldを使用する事でコンボボックスやラジオボタンといった選択UIの出力が可能になります。
widgetに下記のようにRadioSelectを使用する事でラジオボタンの出力が可能となります。

Form

from django import forms

class ChoiceForm(forms.Form):
    selected_time = forms.fields.ChoiceField(
        choices = (
            ('XXXX', '10:00'),
            ('XXXX', '10:30')
        ),
　　　　 label='予約時間',
        required=True,
        widget=forms.widgets.RadioSelect
    )

from django import forms

class ChoiceForm(forms.Form):

selected_time = forms.fields.ChoiceField(

choices = (

('XXXX', '10:00'),

('XXXX', '10:30')

　　　　 label='予約時間',

required=True,

widget=forms.widgets.RadioSelect

)

このFormをtemplateとして下記のようによく紹介されている例で出力するとします。

  <div class="field">
      {{ form.selected_time.label_tag }}
      {{ form.selected_time }}
      {% if form.selected_time.error %}
          <p class="help is-danger">{{ form.selected_time.errors }}</p>
      {% endif %}
  </div>

{% if form.selected_time.error %}

<p class="help is-danger">{{ form.selected_time.errors }}</p>

{% endif %}

</div>

普通に出力するとこんな感じのulで囲まれたHTMLタグが出力されてしまい、最初に紹介した縦に並んだレイアウトになってしまいます。

<div class="field">
 <label for="id_selected_time_0">予約時間:</label>
 <ul id="id_selected_time" class="select_time">
  <li>
   <label for="id_selected_time_0"><input type="radio" name="selected_time" value="10:00:00" class="select_time" required id="id_selected_time_0">
   10:00</label>
  </li>
   <li><label for="id_selected_time_1"><input type="radio" name="selected_time" value="10:30:00" class="select_time" required id="id_selected_time_1">
 10:30</label>

 ....
</div>

<li>

10:00</label>

</li>

10:30</label>

....

</div>

解決方法

formの該当の要素(今回だとselected_time)をfor文で回すと、1個づつの要素が取得できます。
choice_labelとtagでラベルと値を取得できるので、この値を使用して任意のhtml要素として描画すれば好きにレイアウトが作れます。

  <div class="field">
      {{ form.selected_time.label_tag }}
　　　 {% for choice in form.selected_time %}
       {{ choice.choice_label }}
  　　　 <div class="select">{{ choice.tag }}</div>
　　　 {% endfor %}
      {% if form.selected_time.error %}
          <p class="help">{{ form.selected_time.errors }}</p>
      {% endif %}
  </div>

　　　 {% for choice in form.selected_time %}

　　　 <div class="select">{{ choice.tag }}</div>

　　　 {% endfor %}

{% if form.selected_time.error %}

<p class="help">{{ form.selected_time.errors }}</p>

{% endif %}

</div>