Question

模板代码是

{{ form.incident_live }}

forms.py

INCIDENT_LIVE = (
    ('0', 'Live'),
    ('1', 'Test'),
)
class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(),choices=INCIDENT_LIVE)

上面的代码给我带有垂直顺序选项的单选按钮，但我希望它是水平的，即等效的html为<input type="radio" name="status" />Live <input type="radio" name="status" checked="checked"/> Test。

提前致谢

Answer 1

听起来像是自定义窗口小部件渲染器的作业：

from django.utils.safestring import mark_safe

class HorizRadioRenderer(forms.RadioSelect.renderer):
    """ this overrides widget method to put radio buttons horizontally
        instead of vertically.
    """
    def render(self):
            """Outputs radios"""
            return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))

class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(renderer=HorizRadioRenderer),choices=INCIDENT_LIVE)

取自https://wikis.utexas.edu/display/~bm6432/Django-Modifying+RadioSelect+Widget+to+have+horizontal+buttons

Answer 2

＆＃34; alecxe＆＃34;实际上并没有为我工作。但添加CSS代码确实有效：

＆＃13;

{% block style %}
<style>
    .radio{
    display:inline-block;
    }
</style>
{% endblock %}

＆＃13;

Answer 3

实际上，解决方案应该很简单。一切都在Django documentation中。

这是我在某些表格中所做的：

在模板中，表单字段被布局，我将执行以下操作：

{% for field in form.visible_fields %}
    {{ field.errors }}
    {% if field.name == "<some_field_name>" %}
    ...
    ...
    {% elif field.name == "<radio_field_name>" %}
        {% for radio in field %}
            <label for="{{ radio.id_for_label }}">
                {{ radio.choice_label }}
                <span class="radio">{{ radio.tag }}</span>
            </label>
        {% endfor %}
    {% endif %}

{% endfor %}

结果收音机选择：

到目前为止，这一直有效。

Answer 4

根据Django文档，'attrs'是一个包含要在渲染小部件上设置的HTML属性的字典。

考虑到这一点，一个简单的基于表单的解决方案将类似于以下内容：

class IncidentForm(forms.ModelForm):
    incident_live = forms.ChoiceField(
        widget=forms.RadioSelect(attrs={
            'display': 'inline-block',
        }),
        choices=INCIDENT_LIVE
    )

Answer 5

<head>

    <style>

        #try li{
        display:inline-block; }

    </style>

<head>

<body>

    <form id="try" class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">

         {% csrf_token %}
         {{ form.as_p}}                       
        <button type="submit" class="btn btn-
              success">Submit</button> 

    </form> 

 </body>

Answer 6

在 user12379095 的启发下，我想出了这个让收音机与 Bootstrap 一起工作。供我这种对HTML和CSS一窍不通的人参考。这是使用 Boostrap 5，Django 3.1.6：

在 forms.py 中：

from django import forms

class ExampleForm(forms.Form):
    choice = forms.ChoiceField(
        label = 'test',
        choices = zip([1,2,3], ['a','b','c']),
        widget = forms.RadioSelect(
            attrs = {'class' : 'form-check-input'}
        )
    )

在 html 模板中：

        {% for field in form.visible_fields %}
            {{ field.errors }}
            {% for radio in field %}
                <div class="form-check form-check-inline">
                    {{ radio }}
                </div>
            {% endfor %}
        {% endfor %}

在django中自定义单选按钮

6 个答案: