title: how to carry string with spaces through a HTML form, using Flask
body: <p>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:</p>
  
  <pre><code>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 "&lt;h1&gt;You have selected category: " + selected_cat + "&lt;/h1&gt;
  </code></pre>
  
  <p>Where 'selecting.html' is as follows:</p>
  
  <pre><code>&lt;form action='/quiz' method='POST'&gt;
  &lt;ol&gt;
  {% for cat in cats%}
      &lt;li&gt;&lt;input type = 'radio' name= 'categories' value ={{cat}}&gt;{{cat}}&lt;/li&gt;
  {% endfor %}
  &lt;/ol&gt;
  &lt;input type="submit" value="submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I select 'Europe', the quiz page reads:</p>
  
  <pre><code>&lt;h1&gt;You have selected category: Europe&lt;/h1&gt;
  </code></pre>
  
  <p>However, when I select 'North America' the quiz page reads:</p>
  
  <pre><code>&lt;h1&gt;You have selected category: North&lt;/h1&gt;
  </code></pre>
  
  <p>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? </p>