Question

我正在尝试创建一个网络应用程序，该应用程序将生成模板化的代码以用于单独的程序。我想在提交时生成结构合理的表单消息，其中包含选项卡和新行。

这是代码的当前迭代：

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 white-space属性可以在HTML中保留空格，制表符等。 pre或pre-wrap似乎适合这种情况：

pre

保留空白序列。线只在   源和
元素中的换行符。

pre-wrap

保留空白序列。行在换行符处断开   字符，在
，并根据需要填充行框。

将内容包装在适当的元素（例如div）中，然后在其中添加样式：

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

注意：style属性在这里可以完成工作，但是通常首选外部样式表。

使用列表和新行生成格式正确的Flask表单输出

1 个答案: