带有 Bootstrap 的简单 Django 表单答案

【问题标题】：Simple Django Form with Bootstrap带有 Bootstrap 的简单 Django 表单
【发布时间】：2016-07-30 01:58:52
【问题描述】：

我有一个使用引导程序的 Django 模板：

<div class="form-group">
<label form="test2" class="col-sm-2 control-label">test2field</label>
<input type="text" class="form-control" placeholder="Enter test2" id="{{ form.test2 }}">
</div>

我想使用每个表单域 - 例如{{ form.testn }} 显示每个字段，而不是 {{ form.as_p }} 或类似的东西。

然而，上面在浏览器中每个字段的末尾显示了“>”，所以很明显有问题。如果我删除“>”它可以正常工作，并且格式正确，但这显然是不正确的。

有人可以告诉我如何正确执行此操作吗？对于这样一个新手问题，我很抱歉 - 我似乎无法在任何地方找到正确的答案！

谢谢。

【问题讨论】：

您没有在输入 ID 字段中插入 {{ form.field }}。 Django 将为您生成输入字段。只需执行 {{ form.field }}
感谢您的回复。当我在 id= 部分中使用 {{ form.field }} 时，将应用所有 CSS 格式 - 即占位符文本、我的样式表中的字体格式等。当我只使用 {{ form.field }} 时，没有格式。有任何想法吗？谢谢！

标签： css django forms twitter-bootstrap

【解决方案1】：

这是为 Bootstrap 设置表单字段格式的方法：

表格：

self.fields['address'] = forms.CharField(
                            required=True,
                            error_messages = {'required': 'Address is Required!'},
                            label='Address',
                            max_length=50,
                            widget=forms.TextInput(attrs={
                                  'class': 'form-control input-lg',
                                  'id': 'address',
                                  'placeholder': 'Address',
                                  'required': 'required',
                                  'oninvalid': "this.setCustomValidity('Address is Required!')",
                                  'onchange': "this.setCustomValidity('')",
                                      }),
                            )

HTML：

<div class="form-group">
    <label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
    {{ form.address }}
</div>

在这里你可以看到表单是如何呈现的：https://tableagent.com/reservation-system/

【讨论】：

不用担心。很高兴我能帮助你。如果答案正确，您可以将其标记为已接受的答案。这将指示其他用户此代码正在运行。