如何为Django表单添加样式 - Bootstrap

Question

如何为Django表单添加样式 - Bootstrap

6

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

- jesicadev18

您在 {{ form.errors }} 下收到什么信息？ - Brian Dant

3个回答

2

请将表单用container、row和col的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>

- Stefan Musarra

0

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

- Rakesh Nagarajan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Dant · Accepted Answer

"编辑：这段代码实际上为每个表单字段显示了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" 部分。你可能也会对"Django Bootstrap Form"感兴趣，这是一个第三方包，可以快速轻松地进行表单样式设计。

更改内容：
1. 在循环内部移除了{{ field }}变量
2. 在name属性内将{{ field.label }}替换为{{ field.name }}
3. 在value属性内将{{ field.name }}替换为{{ field.value }}