使用 django 和引导类创建单选表单的问题

Posted 2023-03-05

【中文标题】使用 django 和引导类创建单选表单的问题

【英文标题】：Problem to create radio choice form with django and bootstrap classes

【发布时间】：2019-08-28 07:23:01

【问题描述】：

我正在尝试使用 Django 创建一个带有单选按钮选项的表单。该网站是在 bootstrap 4 中设计的，由于某种原因，应用自定义控件输入类时按钮消失了。

我从一个完美呈现的静态模板开始。这些按钮组的代码如下：

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo1" name="sexoRadios">
            <label class="custom-control-label" for="sexo1">Mujer</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo2" name="sexoRadios">
            <label class="custom-control-label" for="sexo2">Hombre</label>
        </div>
    </div>
</div>

为了在 Django 中创建表单，我在 forms.py 文件中添加了这行代码：

sexo_choices=[('hombre','Hombre'),
            ('mujer','Mujer')]
sexo = forms.ChoiceField(choices=sexo_choices, widget=forms.RadioSelect(
        attrs='class':'custom-control-input'
    ))

这会使单选按钮由于某种原因消失。如果我分析 django 创建的 html，它似乎与静态 web 非常相似。

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
      <div class="custom-control custom-radio">
          <label for="id_sexo_0"><input type="radio" name="sexo" value="hombre" class="custom-control-input" id="id_sexo_0" required>Hombre</label>
      </div>
      <div class="custom-control custom-radio">
          <label for="id_sexo_1"><input type="radio" name="sexo" value="mujer" class="custom-control-input" id="id_sexo_1" required>Mujer</label>
      </div>
    </div>
</div>

但是，当我使用 Google Chrome 检查对象时，我发现输入标签具有以下 CSS 属性：

.custom-control-input 
    position: absolute;
    z-index: -1;
    opacity: 0;

似乎问题来自标签标签的类。有没有办法为标签分配一个类？

非常感谢。

【参考方案1】：

我设法解决了我的问题。这就是我离开 HTML 模板的方式：

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
    % for radio in form.sexo %
        <div class="custom-control custom-radio">
             radio.tag 
            <label class="custom-control-label" for=" radio.id_for_label "> radio.choice_label </label>
        </div>
    % endfor %
    </div>
</div>

还是谢谢你。问候

【参考方案2】：

也许可以帮助某人：How to custom checkbox and radio in Django using Bootstrap

template.html

<!-- radio -->
<div class="form-group">
     form.field_name.label_tag 
    % for pk, choice in form.field_name.field.widget.choices %
    <div class="custom-control custom-radio custom-control-inline">
        <input id="id_form.field_name.name_ forloop.counter0 " name="form.field_name.name" type="form.field_name.field.widget.input_type" value="pk" class="custom-control-input"
         % ifequal form.field_name.data pk.0 %
           checked="checked"
         % endifequal %/>
        <label for="id_form.field_name.name_ forloop.counter0 " class="custom-control-label"> choice </label>
    </div>
    % endfor %
</div>

<!-- checkbox -->
<div class="form-group">
     form.field_name.label_tag 
    % for pk, choice in form.field_name.field.widget.choices %
    <div class="custom-control custom-checkbox custom-control-inline">
        <input id="id_form.field_name.name_ forloop.counter0 " name="form.field_name.name" type="form.field_name.field.widget.input_type" value="pk" class="custom-control-input"
         % ifequal form.field_name.data pk.0 %
           checked="checked"
         % endifequal %/>
        <label for="id_form.field_name.name_ forloop.counter0 " class="custom-control-label"> choice </label>
    </div>
    % endfor %
</div>