在有序列表中渲染 Flask wtforms RadioField 行/按钮答案

【问题标题】：Render Flask wtforms RadioField lines/buttons in an ordered list在有序列表中渲染 Flask wtforms RadioField 行/按钮
【发布时间】：2016-12-06 02:36:35
【问题描述】：

我想知道是否可以让 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 包含一个 RadioField 列表，即question_attempts。我想做的是让每个qa 在有序列表而不是无序列表中呈现单选按钮和相关的单选按钮文本。

【问题讨论】：

标签： python html flask jinja2 flask-wtforms

【解决方案1】：

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

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

这最终会在无序列表中呈现单选按钮和相关文本。因为我正在制作一个用户可以参加测试的应用程序，所以我想在“A.B.等”列表中呈现答案选择。这很容易做到——我只需要明确指定我的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 %}

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

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

【讨论】：