how to carry string with spaces through a HTML form, using Flask

Question

I'm trying to build a simple online quiz using Flask and Python 3.6, using HTML forms with radio buttons to carry the selected answers between Flask routes. The first step is to select a category for the quiz, before leading to the actual quiz page, as follows:

app = Flask(__name__)
categories = ['Europe', 'South America', 'North America']
@app.route('/')
def select():
    return render_template('selecting.html', cats= categories)

@app.route('/quiz', methods = ['POST'])
def quizing():
    selected_cat = request.form['categories']
    return "<h1>You have selected category: " + selected_cat + "</h1>

Where 'selecting.html' is as follows:

<form action='/quiz' method='POST'>
<ol>
{% for cat in cats%}
    <li><input type = 'radio' name= 'categories' value ={{cat}}>{{cat}}</li>
{% endfor %}
</ol>
<input type="submit" value="submit"/>
</form>

When I select 'Europe', the quiz page reads:

<h1>You have selected category: Europe</h1>

However, when I select 'North America' the quiz page reads:

<h1>You have selected category: North</h1>

Why is the second word of the selected category not carried between the Flask routes and what can I do to retain the full category name?

Answer 1

根据HTML5 文档，未引用的属性不得包含嵌入空格。

您的input元素扩展为以下文本：

<input type = 'radio' name= 'categories' value =North America>

即使你的意思是它有一个value值为 的属性North America，但它实际上有value一个值为 的属性和一个值为空North的America属性。

尝试引用value属性值：

<li><input type = 'radio' name= 'categories' value ="{{cat}}">{{cat}}</li>