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>

有关其工作原理的更多信息，请查看"Looping over a form's fields" section of the docs.您可能也对"Django Bootstrap Form"感兴趣，这是一个第三方软件包，可以快速轻松地构建样式。

发生了什么变化：
1.删除循环中的{{ field }}变量
2. {{ field.label }}替换为{{ field.name }}属性中的name 3. {{ field.name }}替换为{{ field.value }}属性

中的value

Answer 2

或者，您可以使用forms.py文件来创建表单。并安装django-bootstrap并工作。。这将非常有趣。

Answer 3

用容器，行和列将div中的表单包装起来。另外，添加输入类型。

<style>
    .help-text {
        font-style: italic;
        font-variant: all-small-caps;
    }
</style>
<div class="container">
  <form class="my-form" action="." method="POST">
  {% csrf_token %}
  {% for field in form %}
    <div class="form-group row">
      <label class="col-12 col-form-label" for="id_{{ field.name }}">{{ field.label }}</label>
      <div class="col-12">
        <input
          type="{{ field.field.widget.input_type }}"
          class="form-control"
          name="{{ field.name }}"
          id="id_{{ field.name }}"
          value="{{ field.value|default:'' }}"
        >
      </div>
      <div class="col-12 help-text">{{ field.help_text }} </div>
    </div>
  {% endfor %}
    <div class="row">
      <div class="col-12">
        <input type="submit" value="Submit"  class="btn btn-primary">
      </div>
    </div>
  </form>
</div>

如何设计django形式 - bootstrap

3 个答案: