Django 表单布局

2023-04-11 00:00:00 django 表单 布局

Django 表单布局指的是如何将表单元素布局在页面中，让页面更美观，易于阅读。以下是在 Dango 中使用 Bootstrap 表单布局的示例代码：

<!-- 使用 Bootstrap 的表格布局，把表单元素包裹在 <form> 标签中 -->
<form method="post">
  <table class="table table-bordered">

    <!-- 第一行表单元素 -->
    <tr>
      <td class="col-md-2"><label for="{{ form.username.id_for_label }}">用户名</label></td>
      <td>{{ form.username }}</td>
      <td>{{ form.username.errors }}</td>
    </tr>

    <!-- 第二行表单元素 -->
    <tr>
      <td class="col-md-2"><label for="{{ form.email.id_for_label }}">电子邮件</label></td>
      <td>{{ form.email }}</td>
      <td>{{ form.email.errors }}</td>
    </tr>

    <!-- 第三行表单元素 -->
    <tr>
      <td><label for="{{ form.password1.id_for_label }}">创建密码</label></td>
      <td>{{ form.password1 }}</td>
      <td>{{ form.password1.errors }}</td>
    </tr>

    <!-- 第四行表单元素 -->
    <tr>
      <td><label for="{{ form.password2.id_for_label }}">确认密码</label></td>
      <td>{{ form.password2 }}</td>
      <td>{{ form.password2.errors }}</td>
    </tr>

  </table>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在示例代码中，我们使用了 Bootstrap 的表格布局，把表单元素包裹在 <form> 标签中。每一行表单元素都表示为一个 <tr> 标签，其中：

  • 第一列使用 <td> 标签包裹一个 <label> 标签，为表单元素添加标签；
  • 第二列使用 <td> 标签包裹表单元素；
  • 第三列使用 <td> 标签包裹表单元素的错误信息。

在表单的末尾，我们使用了一个提交按钮，还是使用了 Bootstrap 的样式。

在示例代码中，我们假设表单中有四个元素：用户名、电子邮件、创建密码和确认密码。每个元素的代码都是类似的，也可以使用字符串作为范例，例如：

<tr>
  <td><label for="exampleInputPassword1">密码</label></td>
  <td><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></td>
  <td></td>
</tr>

<tr>
  <td><label for="exampleInputFile">文件输入</label></td>
  <td><input type="file" id="exampleInputFile"></td>
  <td></td>
</tr>

这些示例代码可以插入到表单布局中，实现类似的表单元素效果。

相关文章