带有 RadioBox 的 Crispy Django 表单 - 使用 InlineRadios

Question

我想使用 Crispy Form 在 Django 的单选按钮中设置样式。但是，我已成功使用应用于表单的 CSS 但我需要显示表单 n 内联格式。在 html 中呈现表单后，我得到了一个非内联格式的 put。如果我可以使用单选按钮或选定按钮更详细地了解脆皮形式，我将非常高兴

class ViewForm(forms.Form):
 #django gives a number of predefined fields
 #CharField and EmailField are only two of them
 #go through the official docs for more field details
    VIEWS = (
        ('1', 'Likes & Comments'), 
        ('2', 'Subscribers'),  
        ('2', 'App Installs'),
    )

    GENDER = (
        ('1', 'Female'),
        ('2', 'Male')
    )


    AGE = (
        ('All', 'All'),
        ('13 - 24', '13 - 24'),
        ('25 - 34', '25 - 34'),
        ('35 - 44', '35 - 44'),
        ('45 - 54', '45 - 54'),
        ('55 - 64', '55 - 64'),
    )


    CATEGORY = (
        ('Auto', 'Auto'),
        ('Beauty', 'Beauty'),
        ('Sport', 'Sport'),

    )

    CHOICES=[('select1','select 1'),
         ('select2','select 2')]




    view= forms.ChoiceField(label='BESIDE VIEWS, I ALSO WANT:', widget=forms.RadioSelect, choices=VIEWS)
    age= forms.ChoiceField(label='AGE?', widget=forms.RadioSelect, choices=AGE)
    gender = forms.ChoiceField(label='AGE?', widget=forms.RadioSelect, choices=GENDER)
    location = forms.CharField(max_length=25, required=False)
    category= forms.CharField(label='CATEGORY', widget=forms.Select(choices=CATEGORY))
    keyword = forms.CharField(max_length=50, required=False)

我的css

input[type=radio], input[type=checkbox] {
     display:none;
   }

 input[type=radio] + label, input[type=checkbox] + label {
     display:inline-block;
     margin:-2px;
     padding: 4px 12px;
     margin-bottom: 0;
     font-size: 14px;
     line-height: 20px;
     color: #333;
     text-align: center;
     text-shadow: 0 1px 1px rgba(255,255,255,0.75);
     vertical-align: middle;
     cursor: pointer;
     background-color: #f5f5f5;
     background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
     background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
     background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
     background-image: -o-linear-gradient(top,#fff,#e6e6e6);
     background-image: linear-gradient(to bottom,#fff,#e6e6e6);
     background-repeat: repeat-x;
     border: 1px solid #ccc;
     border-color: #e6e6e6 #e6e6e6 #bfbfbf;
     border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
     border-bottom-color: #b3b3b3;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   }

    input[type=radio]:checked + label, input[type=checkbox]:checked + label{
        background-image: none;
     outline: 0;
     -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
       background-color:#e0e0e0;
   }

我的html

 <div class="row">

                        <div class="form-check-inline col-xl-6">
                          {{ form.view|as_crispy_field }}
                        </div>

                        <div class="form-group col-xl-6">
                          {{ form.age|as_crispy_field }}
                        </div>
                  </div>

                   <div class="row ">

                        <div class="form-group col-xl-6">
                          {{ form.gender|as_crispy_field }}
                        </div>

                        <div class="form-group col-xl-6">
                          {{ form.location|as_crispy_field }}
                        </div>
                  </div>



                   <div class="row">

                        <div class="form-group col-xl-6">
                          {{ form.category|as_crispy_field }}
                        </div>

                        <div class="form-group col-xl-6">
                          {{ form.keyword|as_crispy_field }}
                        </div>
                  </div>

Answer 1

我使用字段选择来手动渲染它。

hot_flow_type = ChoiceField(choices=flow_types, initial="1", widget=forms.RadioSelect, required=True)


{% for choice in form.hot_flow_type.field.choices %}
       <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="{{ form.hot_flow_type.html_name }}" 
                                   id="id_{{ form.hot_flow_type.id_for_label }}_{{ forloop.counter }}"
                                   value={{choice.0}} {% if choice.0 == form.hot_flow_type.value or choice.0 == form.hot_flow_type.initial %} checked="checked"{% endif %} required>
                            <label class="form-check-label"
                                   for="id_{{ form.hot_flow_type.id_for_label }}_{{ forloop.counter }}">{{choice.1}}</label>
                        </div>
{% endfor %}

另一种方式创建 CustomRadioSelect 小部件。

class CustomRadioSelect(forms.RadioSelect):
    template_name = 'customradio.html'

并创建 customradio.html，如下所示。

{% for group, options, index in widget.optgroups %}
    {% for option in options %}
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="{{ option.name }}"
                   id="{{ option.attrs.id }}"
                   value={{option.value}} required {% if widget.value.0 == option.value or option.value == widget.initial %} checked="checked"{% endif %} />
            <label class="form-check-label" for="{{ option.attrs.id }}">{{option.label}}</label>
        </div>
    {% endfor %}
{% endfor %}

在主 html 模板中，您可以直接编写。

{{ form.hot_flow_type }}

带有 RadioBox 的 Crispy Django 表单 - 使用 InlineRadios

Crispy Django Form With RadioBox - Using InlineRadios

django

forms

django-crispy-forms