如何使用带有 html 的 Django 表单制作提交按钮

Posted 2023-02-24

【中文标题】如何使用带有 html 的 Django 表单制作提交按钮

【英文标题】：How to make an Submit button using Django Forms with html

【发布时间】：2016-06-17 18:41:34

【问题描述】：

我正在使用 Django 表单创建一个网站，我的字段是

admin = forms.BooleanField(
    required=False,
    widget=forms.CheckboxInput(),
    label=(u'Admin for the account')
)
owner = forms.BooleanField(
    required=False,
    widget=forms.CheckboxInput(),
    label=(u'Owner for the account')
)

在我的 html 页面中，我想要一个提交按钮，点击它会显示一个弹出窗口，其中有一个确定按钮，点击哪个所有者的值（复选框）会去。

【问题讨论】：

只需在表单底部创建一个提交按钮，然后将验证功能附加到该表单。单击该表单上的提交按钮时会调用此函数。

【参考方案1】：

这是来自Form class的文档

请注意，它不包括<form> 标记或submit 按钮。我们必须自己在模板中提供这些内容。

关于以下附加功能：

在我的 html 页面中，我想要一个提交按钮，点击它会显示 一个弹出窗口，其中有一个确定按钮，单击哪个值 所有者（复选框）将消失。

如果你想这样做，你需要编写自定义的 javascript 函数。您可以为此使用jquery 插件。有更多关于使用 jquery 提交表单和额外处理here 的文档。

【参考方案2】：

您必须在 html 中手动包含提交按钮。

示例代码：请注意，我使用了引导模式。

<form action="" method="post">% csrf_token %
  <!-- your input field will go here -->
  <!-- Small modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Submit</button>

  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <input type="checkbox" name="user" value="user"><br>
        <input type="submit" value="Okay">
      </div>
    </div>
  </div>
</form>