使用表格和新行生成格式良好的Flask表单输出

Question

我正在尝试创建一个web应用程序，它将生成模板化代码，以便在单独的程序上使用。我想在提交时生成一个结构良好的表单消息，其中包含制表符和新行

这是代码的当前迭代：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import Required

app = Flask(__name__)
# Flask-WTF requires an enryption key - the string can be anything
app.config['SECRET_KEY'] = 'some?bamboozle#string-foobar'
# Flask-Bootstrap requires this line
Bootstrap(app)
# this turns file-serving to static, using Bootstrap files installed in env
# instead of using a CDN
app.config['BOOTSTRAP_SERVE_LOCAL'] = True

# with Flask-WTF, each web form is represented by a class
# "NameForm" can change; "(FlaskForm)" cannot
# see the route for "/" and "index.html" to see how this is used
class NameForm(FlaskForm):
    group_name = StringField('Which is the name of the group label?', validators=[Required()])
    question = StringField('What is the question?', validators=[Required()])
    answer = StringField('What is the answer?', validators=[Required()])
    c1 = StringField('What is the first answer choice?', validators=[Required()])
    c2 = StringField('What is the second answer choice?', validators=[Required()])
    c3 = StringField('What is the third answer choice?', validators=[Required()])
    c4 = StringField('What is the fourth answer choice?', validators=[Required()])

    submit = SubmitField('Submit')

# all Flask routes below

# two decorators using the same function
@app.route('/', methods=['GET', 'POST'])
@app.route('/hello.html', methods=['GET', 'POST'])
def hello():
    # you must tell the variable 'form' what you named the class, above
    # 'form' is the variable name used in this template: index.html
    form = NameForm()
    message = ""
    if form.validate_on_submit():
        message = f"""
            *group: {form.group_name.data}
            \t*program: Progress_Increment
            \t*question: {form.question.data}
            \t\t*shuffle
            \t\t{form.c1.data}
            \t\t{form.c2.data}
            \t\t{form.c3.data}
            \t\t{form.c4.data}
            \t\t*save: {form.group_name.data}_q1
            \t\t-- *countdown: 30.seconds
            \t\t*throwaway
            \t>> {form.group_name.data}_answer = "{form.answer.data}"

            \t*program: Progress_Increment
            \t*question: For the previous question, how confident are you that the answer you selected is reasonably close to the correct answer?
            \t\t*type: slider
            \t\t*before: 0% confident
            \t\t*after: 100% confident
            \t\t*min: 0
            \t\t*max: 100
            \t\t*save: {form.group_name.data}_confidence
            \t\t-- *countdown: 30.seconds
            \t\t*throwaway

            \t*program: Progress_Increment
            \t*question: Is it important to you that your answer is reasonably close to the correct answer? That is, is this a topic where you would care about being wrong or right?
            \t\t*type: slider
            \t\tDon't care at all
            \t\tCare a little
            \t\tCare somewhat
            \t\tCare somewhat strongly
            \t\tCare strongly
            \t\t*before: Don't care at all
            \t\t*after: Care strongly 
            \t\t*save: {form.group_name.data}_importance
            \t\t-- *countdown: 30.seconds
            \t\t*throwaway
            """


    # notice that we don't need to pass name or names to the template
    return render_template('hello.html', form=form, message=message)

# keep this as is
if __name__ == '__main__':
    app.run(debug=True) 

html文件如下所示

{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block styles %}
{{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}


{% block title %}
Question Submission
{% endblock %}


{% block content %}

<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <h1>Question Generator Page</h1>

      <p class="lead">Please fill out the forms below</p>

      {{ wtf.quick_form(form) }}

      <p class="space-above"><strong>{{ message }}</strong></p>

    </div>
  </div>
</div>

{% endblock %}

在提交表单时，我希望输出保留嵌入消息中的内置表格。我假设这需要在.html文件中进行一些处理，但我不确定这样做的正确方法

有什么想法吗

Answer 1

CSS^{}属性可以在HTML中保留空格、制表符等pre或pre-wrap似乎适合这种情况：

pre

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

将内容包装到适当的元素中（例如div），并将样式添加到该元素中：

<p class="space-above" style="white-space: pre-wrap"><strong>{{ message }}</strong></p>

注意：style属性在这里起作用，但通常首选外部样式表