如何设计django形式 - bootstrap

Question

我正在设计我的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>

那不行.我也尝试了这个,但仍然没有运气,它显示样式字段但不检索信息(我在{{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>

任何提示都会被贬低.问候.

编辑:第二个代码实际上显示每个表单字段的2个输入字段.如果我填写第二个,表单有效,但是,第二个输入没有样式...

Answer 1

"编辑:第二个代码实际上显示了每个表单字段的2个输入字段."

第一个输入是由<input>您明确写入的标记生成的:

<input type="text" class="form-control"
            name="{{ field.label }}"
            id="{{ field.name }}"
            value="{{ field.name }}" >

第二个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>

"如果我填写第二个,表单有效,但第二个输入没有样式......"

样式不起作用,因为在{{ field }}呈现输入时,它上面没有css类.

此外,您已切换每个字段对象的一些属性(有关更多信息,请参阅下面的"更改内容"部分).

试试这段代码:

<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>

有关其工作原理的更多信息,请查看文档中的"循环表单的字段"部分. 您可能还对"Django Bootstrap Form"感兴趣,这是一个第三方软件包,可以快速轻松地构建样式.

改变了什么:
1.删除{{ field }}循环内的变量
2. {{ field.label }}替换{{ field.name }}为name属性内的
3. {{ field.name }}替换{{ field.value }}为value属性内