8

模板代码是

{{ form.incident_live }}

表格.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。

提前致谢

4

6 回答 6

7

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

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+horizo​​ntal+buttons

于 2013-05-27T13:13:40.217 回答
3

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

以下是我在某些形式中所做的：

在布局表单字段的模板中，我将这样做：

{% 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 %}

生成的收音机选择：

在此处输入图像描述

到目前为止，这已经奏效。

于 2020-04-12T06:06:03.003 回答
2

这种“alecxe”的解决方案实际上并没有为我工作。但是添加 CSS 代码确实有效：

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

于 2015-11-24T14:12:04.263 回答
0

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

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

class IncidentForm(forms.ModelForm):
    incident_live = forms.ChoiceField(
        widget=forms.RadioSelect(attrs={
            'display': 'inline-block',
        }),
        choices=INCIDENT_LIVE
    )
于 2017-08-21T22:37:24.273 回答
0 

<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>

于 2017-12-11T09:04:24.567 回答
0

在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 %}
于 2021-02-23T16:22:13.497 回答