在有序列表中渲染 Flask wtforms RadioField lines/buttons
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
包含一个 RadioFields 列表,即 question_attempts
。我想要做的是让每个 qa
在有序列表而不是无序列表中呈现单选按钮和关联的单选按钮文本。
在查看 WTForms documentation 时,我最初错过了 RadioFields 描述下方的部分,该部分描述了默认情况下如何呈现单选按钮列表。我将在下面展示它:
{% for subfield in form.radio %}
<tr>
<td>{{ subfield }}</td>
<td>{{ subfield.label }}</td>
</tr>
{% endfor %}
这最终会在无序列表中呈现单选按钮和关联的文本。因为我正在制作一个用户可以参加测试的应用程序,所以我想在 "A. B. etc." 列表中呈现答案选择这很容易做到 - 我只需要明确指定我的 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 %}
现在表单在有序列表中呈现单选按钮字段!
虽然显式编写模板会让您更好地控制字段的呈现方式,但您需要确保表单的每个组件都在模板中呈现。否则来自这些字段的数据将不会包含在发布的数据中。对于需要用户输入的字段(因为您看不到它们),这将是显而易见的,但如果您将隐藏字段用于管理数据,则可能会导致问题。
我想知道是否可以让 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
包含一个 RadioFields 列表,即 question_attempts
。我想要做的是让每个 qa
在有序列表而不是无序列表中呈现单选按钮和关联的单选按钮文本。
在查看 WTForms documentation 时,我最初错过了 RadioFields 描述下方的部分,该部分描述了默认情况下如何呈现单选按钮列表。我将在下面展示它:
{% for subfield in form.radio %}
<tr>
<td>{{ subfield }}</td>
<td>{{ subfield.label }}</td>
</tr>
{% endfor %}
这最终会在无序列表中呈现单选按钮和关联的文本。因为我正在制作一个用户可以参加测试的应用程序,所以我想在 "A. B. etc." 列表中呈现答案选择这很容易做到 - 我只需要明确指定我的 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 %}
现在表单在有序列表中呈现单选按钮字段!
虽然显式编写模板会让您更好地控制字段的呈现方式,但您需要确保表单的每个组件都在模板中呈现。否则来自这些字段的数据将不会包含在发布的数据中。对于需要用户输入的字段(因为您看不到它们),这将是显而易见的,但如果您将隐藏字段用于管理数据,则可能会导致问题。