djangoでラジオボタンの設定をするとき、横並びにしたいけど、実装するのは難しいという場面がありますよね。

そこで今回は、ラジオボタンを横並びにする2つの方法についてお伝えします。

ラジオボタンを横並びにするには、djangoのタグを使うか、CSSの調整をします

上記の通り、ラジオボタンを横並びにするにはdjangoのタグを使うか、CSSの調整をすることで実現することができます。

ここからそれぞれのやり方についてみていきましょう。

前提となる設定

今回も、ベースとなるコードはこちらの記事を参考にしてください。

djangoのタグを使う方法

まずはdjangoのタグを使う方法です。

ラジオボタンは、queryset型（辞書型のようなイメージ）ですので、一つずつデータを取り出すことができます。

実際にコードを書いてみましょう。

コード
aaa.html
<form method='post'>{% csrf_token %}
    {{ form.title.0 }}
    {{ form.title.1 }}
    <input type="submit" value="送信">
</form>

form.titleというのはラジオボックスフィールドのことです。

このラジオボックスフィールドを、0.1.という形で数字を指定することによって、個別にフィールドを取り出すことができるのです。

なお、form.title.0..という書き方は少しスマートではありませんので、このように書くとよいかもしれません。

コード
aaa.html
<form method='post'>{% csrf_token %}
  {% for radiobutton in form.title %}
    {{ radiobutton }}
  {% endfor %}
    <input type="submit" value="送信">
</form>

for文を使うことによって、後でデータが増えたり減ったりした場合でもhtmlファイルを書き換えなくても済むようになります。

htmlファイルを使う方法

CSSの調整をする方法

次はCSSの調整をする方法です。

そもそも、なぜラジオボタンが縦に並ぶのかという点から理解していきましょう。

ラジオボタンが縦に並ぶのは、ur,liタグが付いているからです。

liタグは、リストを書くときに使われるタグです。

リストは縦に並べるのが一般的ですので、ラジオボタンも縦に並ぶのが初期設定となっているのです。

これを横並びにするには、CSSの調整をしてあげればよいです。

CSSを横並びにする方法はネットで検索すれば出てきますので、詳細の説明はしませんが、ここではdjangoでラジオボタンを作った時にデフォルトで設定されるタグを紹介します。

このタグにCSSを設定することで横並びにすることも可能です。

ulタグに設定される項目

まずはurタグに設定される項目です。urタグにはこのような設定がされます。

コード
< ul id="id_(フォームの名前)">

(フォームの名前)の部分には、forms.pyで設定したフォームの名前が入ります。

今回は、title = forms.Radio..というコードを書きましたので、id_titleという記載になります。

liタグに設定される項目

次に、liタグに設定される項目を見ていきましょう。

コード
<label for="id_(フォームの名前)_(通し番号))">

ulとliの間にlabelが入ります。

次がliタグです。

<input type="radio" name="(フォームの名前)" value="(選択肢で設定したデータ)" id="id_(フォームの名前)_(通し番号)">となります。

ちょっと分かりづらいので、前提条件とフォームの内容を比べてみてみましょう。

コード
CHOICES = (('no1', 'First'), ('no2', 'Second'))
class RadioForm(forms.Form):
    title = forms.ChoiceField(
      widget-forms.RadioSelect,
      choices=CHOICES
      )

黒字の部分が関係してきます。

コード
<ul id="id_title">
<li>
<label for="id_title_0">
<input type="radio" name="title" value="no1" required id="id_title_0">First</label>
</li>
<li>
<label for="id_title_1">
<input type="radio" name="title" value="no2" required id="id_title_1">
Second</label>
</li>
</ul>

ラジオボタンを横並びにする2つの方法をお伝えしました。

使いやすい方を選んで効率的にコードを書いていきましょう。