5

我正在为我的 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 个输入字段。如果我填写第二个，表格可以工作，但是，第二个输入没有样式......

4

3 回答 3

19

“编辑：第二个代码实际上是为每个表单域显示 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

于 2013-09-16T04:19:43.813 回答
0

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

于 2018-12-31T13:43:09.137 回答
0

用容器、行和列将表单包装在 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>
于 2020-09-15T10:24:46.910 回答