如何创建一个django表单 - 引导 [英] How to style a django form - bootstrap

问题描述

我正在设计我的django应用程序，但Iam在形式化时遇到困难。我在form.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％} 
 {形式％} 
< 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.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> 
  

任何提示都将被赋值
请问。 / p>

编辑：
这第二个代码实际上为每个表单字段显示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}}<  - 这一个
< p class =help-text> {{field.help_text}}< / p> 
< / div> 
  

如果填写第二个表单，表单可以工作，但这个第二个
输入没有样式...

样式不起作用，因为 {{field}} 输入被渲染，没有css类。

此外，您已经切换了每个字段对象的某些属性（有关更多信息，请参阅下文更改内容部分）。

尝试以下代码：

 < form class =form-contactaction =method = POST > 
 {％csrf_token％} 
 {％表单中的字段％} 
< 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表单感兴趣，这是第三方软件包允许快速简单的表单样式。

发生了什么变化：

1.删除了 {{field}} 变量在循环中

2. {{field.label}} 替换为 {{field。 名称中的名称}}

3. {{field.name}} 替换为中的 {{field.value}} 属性

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表单 - 引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！