渲染Flask在一个有序列表中重写RadioField行/按钮(Render Flask wtforms RadioField lines/buttons in an ordered list)

渲染Flask在一个有序列表中重写RadioField行/按钮(Render Flask wtforms RadioField lines/buttons in an ordered list)

我想知道是否可以让Flask WTForms RadioField在有序列表中呈现单选按钮列表而不是无序列表。 我目前的jinja2模板如下：

{% extends "base.html.j2" %} {% block content %} <form action="/test" method="POST"> {% if test_form.errors %} {{ test_form.errors }} {% endif %} {{ test_form.csrf_token }} {% for qa in test_form.question_attempts %} <div class="well"> <div> {{ qa.label }} </div> <div> {{ qa }} </div> </div> {% endfor %} {{ test_form.submitfield(class="btn btn-success") }} </form> {% endblock %}

qa变量是RadioField输入的位置。

编辑：

为了澄清， test_form包含一个test_form列表，它们是question_attempts 。 我想要做的是让每个qa在有序列表中呈现单选按钮和相关的单选按钮文本，而不是无序列表。

I would like to know if it's possible to have Flask WTForms RadioField render the list of radio buttons in an ordered list instead of an unordered list. My current jinja2 template is as follows:

{% extends "base.html.j2" %} {% block content %} <form action="/test" method="POST"> {% if test_form.errors %} {{ test_form.errors }} {% endif %} {{ test_form.csrf_token }} {% for qa in test_form.question_attempts %} <div class="well"> <div> {{ qa.label }} </div> <div> {{ qa }} </div> </div> {% endfor %} {{ test_form.submitfield(class="btn btn-success") }} </form> {% endblock %}

Where the qa variable is the RadioField input.

EDIT:

To clarify, the test_form contains a list of RadioFields, which are the question_attempts. What I would like to do is have each qa render the radio buttons and associated radio button text in an ordered list rather than an unordered list.

最满意答案

在查看WTForms文档时，我最初错过了RadioFields描述下面的部分，该部分描述了默认情况下如何呈现单选按钮列表。 我将在下面显示：

{% for subfield in form.radio %} <tr> <td>{{ subfield }}</td> <td>{{ subfield.label }}</td> </tr> {% endfor %}

这最终将无线电按钮和相关文本呈现在无序列表中。 由于我正在创建一个用户可以进行测试的应用程序，我想在“AB等”列表中呈现答案选项。 这很容易做 - 我只需要明确指定我的question_attempt表单中的无线电字段是如何呈现的。 我将在下面显示我的更新代码：

{% extends "base.html.j2" %} {% block content %} <form action="/test" method="POST"> {% if test_form.errors %} {{ test_form.errors }} {% endif %} {{ test_form.csrf_token }} {% for qa in test_form.question_attempts %} <div class="well"> <div> {{ qa.label }} </div> <div> <ol type="A"> {% for subfield in qa.answer_selection %} <li> {{ subfield }} {{ subfield.label }} </li> {% endfor %} </ol> {{ qa.question_id }} </div> </div> {% endfor %} {{ test_form.submitfield(class="btn btn-success") }} </form> {% endblock %}

现在表单呈现单选按钮字段和有序列表！

虽然显式编写模板可以让您更好地控制字段的呈现方式，但您需要确保表单的每个组件都在模板中呈现。 否则，来自这些字段的数据将不会包含在已发布的数据中。 对于需要用户输入的字段（因为您不会看到它们），这将是显而易见的，但如果您使用隐藏字段作为内务处理数据，则会导致问题。

When reviewing the WTForms documentation I had initially missed the part underneath the RadioFields description which describes how the list of radio buttons are rendered by default. I'll show it below:

{% for subfield in form.radio %} <tr> <td>{{ subfield }}</td> <td>{{ subfield.label }}</td> </tr> {% endfor %}

This ends up rendering the radio buttons and associated text in an unordered list. Since I'm making an app where users can take a test, I wanted to render the answer choices in a list of "A. B. etc." This was fairly easy to do - I just needed to explicitly specify how the radio fields in my question_attempt form needed to be rendered. I'll show my updated code below:

{% extends "base.html.j2" %} {% block content %} <form action="/test" method="POST"> {% if test_form.errors %} {{ test_form.errors }} {% endif %} {{ test_form.csrf_token }} {% for qa in test_form.question_attempts %} <div class="well"> <div> {{ qa.label }} </div> <div> <ol type="A"> {% for subfield in qa.answer_selection %} <li> {{ subfield }} {{ subfield.label }} </li> {% endfor %} </ol> {{ qa.question_id }} </div> </div> {% endfor %} {{ test_form.submitfield(class="btn btn-success") }} </form> {% endblock %}

Now the form renders the radio button fields in and ordered list!

While explicitly writing the template will give you more control for how the fields are rendered, you then need to make sure that each component of the form is rendered in the template. Otherwise data from those fields will not be included in the posted data. This will be obvious for fields that require user input (as you won't see them), but can cause problems if you're using hidden fields for housekeeping data.