Question

所以我正在尝试使用Django Forms，现在我正在学习如何设置表单样式。

这是我的代码，

{% for field in form %}
<form class="form-contact" action="" method="POST"> {% csrf_token %}
<fieldset class="form-group">
            <div class="form-control">
              <input type="text" class="form-control"
                name="{{ field.name }}"
                id="id_{{ field.name }}"
                placeholder="{{field.label}}"
               </div>
        </fieldset>
       </form>
   {% endfor %}

现在我在这个表格中有3个模型，两个是文本输入，第三个是使用单选按钮的列表 -

然而单选按钮不会显示我的CSS - 然而它们确实显示没有CSS样式时 - 有人能指出我的方向也是为什么？

仅供参考 - Django的新手。

提前致谢。

Answer 1

此表单只包含一个未关闭的文本输入（缺少＆gt;占位符后）

placeholder="{{field.label}}">

您需要提供更多信息。

更新 for标签位置错误，请检查此代码

<form class="form-contact" action="" method="POST"> {% csrf_token %}
    <fieldset class="form-group">
        <div class="form-control">
            <input type="text" class="form-control"
            name="{{ form.field1.name }}"
            id="id_{{ form.field1.name }}"
            placeholder="{{form.field1.label}}">
            <input type="text" class="form-control"
            name="{{ form.field2.name }}"
            id="id_{{ form.field2.name }}"
            placeholder="{{form.field2.label}}">
            <input type="radio" class="form-control"
            name="{{ form.field3.name }}"
            id="id_{{ form.field3.name }}"
            placeholder="{{form.field3.label}}">
        </div>
    </fieldset>
</form>

也许你想让django为你生成输入并仍然有一些控制aver css样式，使用它：

<form class="form-contact" action="" method="POST"> {% csrf_token %}
    <fieldset class="form-group">
    {% for field in form %}
        <div class="form-control">
            {{ field }}
        </div>
    {% endfor %}
        <div class="foo">
            <button class="bar" id="login-btn">Se Connecter</button>
        </div>
    </fieldset>
</form>

并在 forms.py 中添加小部件attrs ：

field1=forms.CharField(widget=forms.TextInput(attrs={'class':'some_class'}))

使用3个字段名称更改field1，field2，field3。

Answer 2

似乎我的CSS文件确实配置错误，一个简单的替换解决了这个问题。

感谢所有善于尝试帮助解答的人。

带CSS的Django ModelForms单选按钮

2 个答案: