CSS 如何设置 django 表单的样式 - bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18805999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a django form - bootstrap
提问by jesicadev18
I am styling my django app but Iam having trouble styling the forms. I have a contact form, in my forms.py and then I have use it in a template.
我正在设计我的 django 应用程序，但我在设计表单时遇到了麻烦。我在我的 forms.py 中有一个联系表单，然后我在模板中使用了它。
<form class="form-contact" action="" method="POST">
{% csrf_token %}
<input type="text" name="Name" id="id_name" value="{{form.name}}" />
<input type="submit" value="Submit" class="btn btn-primary">
</form>
That isn't working. I have also tried this, but still no luck, it shows styled fields but doesn't retrieve the information ( I get a message under my {{form.errors}} .
那行不通。我也试过这个，但仍然没有运气，它显示样式字段但不检索信息（我在 {{form.errors}} 下收到一条消息。
<form class="form-contact" action="" method="POST">
{% csrf_token %}
{% for field in form %}
<fieldset class="form-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
{{ field }}
<p class="help-text">{{ field.help_text }} </p>
</div>
</fieldset>
{% endfor %}
<input type="submit" value="Submit" class="btn btn-primary">
</form>
Any hint would be apreciated. Regards.
任何提示都会受到赞赏。问候。
EDIT: This second code, is actually showing 2 input fields for each form field. If I fill the second one, the form works but, this second input has no styling...
编辑：第二个代码实际上为每个表单字段显示了 2 个输入字段。如果我填写第二个，表单可以工作，但是，第二个输入没有样式......
回答by Brian Dant
"EDIT: This second code, is actually showing 2 input fields for each form field."
“编辑：第二个代码实际上为每个表单字段显示了 2 个输入字段。”
The first input is being generated by the <input>tag that you've explicitly written:
第一个输入是由<input>您明确编写的标签生成的：
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
The second inputis being generated by the {{ field }}variable:
第二个input是由{{ field }}变量生成的：
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
{{ field }} <-- this one
<p class="help-text">{{ field.help_text }} </p>
</div>
"If I fill the second one, the form works but, this second input has no styling..."
“如果我填写第二个，表单就可以工作，但是，第二个输入没有样式......”
The styling isn't working because when the {{ field }}input is rendered, there's no css classes on it.
样式不起作用，因为在{{ field }}呈现输入时，上面没有 css 类。
Additionally, you've switched some of the attributes of each field object (see "What changed" section below for more).
此外，您还切换了每个字段对象的一些属性（有关更多信息，请参阅下面的“更改内容”部分）。
Try this code:
试试这个代码：
<form class="form-contact" action="" method="POST">
{% csrf_token %}
{% for field in form %}
<fieldset class="form-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.name }}"
id="id_{{ field.name }}"
value="{{ field.value }}" >
<p class="help-text">{{ field.help_text }} </p>
</div>
</fieldset>
{% endfor %}
<input type="submit" value="Submit" class="btn btn-primary">
</form>
For more on how this works, check out the "Looping over a form's fields" section of the docs.You might also be interested in "Django Bootstrap Form", a third-party-package that allows for quick and easy form styling.
有关其工作原理的更多信息，请查看文档的“循环表单字段”部分。您可能还对"Django Bootstrap Form"感兴趣，这是一个第三方包，可以快速轻松地进行表单样式设置。
What changed:
1. Removed the {{ field }}variable within the loop
2. {{ field.label }}replaced with {{ field.name }}within the nameattribute
3. {{ field.name }}replaced with {{ field.value }}within the valueattribute
更改内容：
1. 删除{{ field }}循环内的变量
2.{{ field.label }}替换{{ field.name }}为name属性内
3.{{ field.name }}替换{{ field.value }}为value属性内
回答by Rakesh Nagarajan
Alternatively you can use, forms.py file for creating forms. And install django-bootstrap and work.. It will be very interesting.
或者，您可以使用 forms.py 文件来创建表单。并安装 django-bootstrap 并工作.. 这将是非常有趣的。
