如何风格django表单 - bootstrap [英] How to style a django form - bootstrap
问题描述
我的样式我的django应用程序,但IAM麻烦样式的表单。我有一个联系表单,在我的forms.py,然后我在模板中使用它。
< form class = form-contactaction =method =POST>
{%csrf_token%}
< input type =textname =Nameid =id_namevalue ={{form.name}}/>
< input type =submitvalue =Submitclass =btn btn-primary>
< / form>
这不工作。我也试过这个,但仍然没有运气,它显示风格字段,但不检索信息(我收到一个消息在我的{{form.errors}}。
< form class =form-contactaction =method =POST>
{%csrf_token%}
{%for field in form%}
< fieldset class =form-group>
< label class =control-labelfor =id _ {{field.name}} .label}}< / label>
< div class =form-control>
< input type =textclass =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 =submitvalue =Submitclass =btn btn-primary>
< / form>
任何提示都会遗漏。
谨慎。
b $ b第二个代码实际上为每个表单字段显示了2个输入字段。如果我填写第二个,表单工作,但第二个输入没有样式...
编辑:第二个代码,实际上为每个
表单字段显示了2个输入字段。
第一个输入是由您明确编写的< input>
标记生成的:
< input type =textclass =form-control
name ={{field.label}}
id ={{field.name}}
value ={{field.name}}>
第二个输入
正由 {{field}}
变量:
< div class =形式控制>
< input type =textclass =form-control
name ={{field.label}}
id ={{field.name}}
value ={{field.name}}>
{{field}}< - this one
< p class =help-text> {{field.help_text}}< / p&
< / div>
如果我填写第二个,表单工作,第二个
输入没有样式...
样式不工作,因为当 {{field}}
输入,没有css类。
此外,您已切换每个字段对象的某些属性(有关更多信息,请参阅下面的更改部分)。
尝试此代码:
< form class =form-contactaction =method = POST>
{%csrf_token%}
{%for form%}
< fieldset class =form-group>
< label class =control-labelfor =id _ {{field.name}}> {{field.label}}< / label&
< div class =form-control>
< input type =textclass =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 =submitvalue =Submitclass =btn btn-primary>
< / form>
有关如何工作的更多信息,请查看在表单的字段上方滑动部分您可能还会对Django Bootstrap Form,第三方软件包允许快速简单的表单样式。 p>
发生了什么变化:
1.删除循环中的 {{field}}
br>
2. {{field.name}}
替换为在
名称
属性中
3. {{field.name}}
替换为<$ 值
属性中的
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.
<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 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...
"EDIT: This second code, is actually showing 2 input fields for each form field."
The first input is being generated by the <input>
tag that you've explicitly written:
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
The second input
is being generated by the {{ field }}
variable:
<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.
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.
What changed:
1. Removed the {{ field }}
variable within the loop
2. {{ field.label }}
replaced with {{ field.name }}
within the name
attribute
3. {{ field.name }}
replaced with {{ field.value }}
within the value
attribute
这篇关于如何风格django表单 - bootstrap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!