nobu blog

プログラミングやゲームの話など。

*



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

   

概要

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

スポンサーリンク

Before
ulがある場合

After
ulなし

背景

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

スポンサーリンク

Form

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

スポンサーリンク

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

スポンサーリンク

解決方法

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

 - python