CODEWITHSUNDEEP
pythonflask
Christina Zhou
Christina Zhou

Reputation: 1863

Refactor rendering Flask form with multiple similar inputs

I have a HTML file containing forms with genres and styles. It's fine, but I'd like to make it easier for me to change genres and styles on the fly vs. it being hardcoded. I'd also like to start breaking it up because I want to start adding color and other stylistic things.

<html><body>
<h2> Spin yo records </h2>
    <form action="/query">
        <input type='submit' value="I'm Feeling Lucky">
    </form>
    <form action="/query">
        <input type='submit' name='genre' value="Electronic">
        <input type='submit' name='genre' value="Rock">
        <input type='submit' name='genre' value="Jazz">
        <input type='submit' name='genre' value="Pop">
        <input type='submit' name='genre' value="Classical">
    </form>
    <form action="/query">
        <input type='submit' name='style' value="Ambient">
        <input type='submit' name='style' value="Drone">
        <input type='submit' name='style' value="Shoegaze">
        <input type='submit' name='style' value="Pop Rock">
        <input type='submit' name='style' value="Post Rock">
        <input type='submit' name='style' value="Hard Rock">
        <input type='submit' name='style' value="Prog Rock">
        <input type='submit' name='style' value="Black Metal">
        <input type='submit' name='style' value="Folk, World, & Country">
        <input type='submit' name='style' value="Modern">
    </form>
</body></html>

I tried to refactor it by splitting the form parts, but it didn't really reduce the amount of code.

header_html = """
<h2> Spin yo records </h2>"""

all_form_html = """
        <form action="/query">
            <input type='submit' value="I'm Feeling Lucky">
        </form>
        """

genres_form_html = """
        <form action="/query">
            <input type='submit' name='genre' value="Electronic">
            <input type='submit' name='genre' value="Rock">
            <input type='submit' name='genre' value="Jazz">
            <input type='submit' name='genre' value="Pop">
            <input type='submit' name='genre' value="Classical">
        </form>
        """

styles_form_html = """
        <form action="/query">
            <input type='submit' name='style' value="Ambient">
            <input type='submit' name='style' value="Drone">
            <input type='submit' name='style' value="Shoegaze">
            <input type='submit' name='style' value="Pop Rock">
            <input type='submit' name='style' value="Post Rock">
            <input type='submit' name='style' value="Hard Rock">
            <input type='submit' name='style' value="Prog Rock">
            <input type='submit' name='style' value="Black Metal">
            <input type='submit' name='style' value="Folk, World, & Country">
            <input type='submit' name='style' value="Modern">
        </form>
        """

homepage = """
<html><body>""" \
+ header_html \
+ all_form_html \
+ genres_form_html \
+ styles_form_html + \
"""
</body></html>

Upvotes: 0

Views: 86

Answers (2)

Elisabeth Strunk
Elisabeth Strunk

Reputation: 566

You can pass the genres and styles as lists to a template for Flask to render. The template loops over each list and renders an input with a value for each item.

In templates/spin_records.html:

<form action="{{ url_for('spin_records') }}">
    Genres:
    {% for genre in genres%}
    <input type='submit' name='genre' value="{{ genre }}"><br/>
    {% endfor %}
    Styles:
    {% for style in styles%}
    <input type='submit' name='style' value="{{ style }}"><br/>
    {% endfor %}
</form>

In your Python code, e.g.:

from flask import Flask, render_template

app = Flask(__name__)

genres = ["Electronic", "Rock", "Jazz", "Pop", "Classical"]
styles = ["Ambient", "Drone", "Shoegaze", "Pop Rock", 
          "Post Rock", "Hard Rock", "Prog Rock", "Black Metal", 
          "Folk, World, & Country", "Modern"]

@app.route('/spin_records')
def spin_records():
    return render_template('spin_records.html', genres=genres, styles=styles)

Upvotes: 2

Bhupesh lad
Bhupesh lad

Reputation: 400

you can try this:

header_html = """
<h2> Spin yo records </h2>"""

all_form_html = """
        <form action="/query">
            <input type='submit' value="I'm Feeling Lucky">
        </form>
        """
genres = ["Electronic","Rock","Jazz","Pop","Classical"]
genres_form_html ="<form action='/query'>"
for gen in genres:
    genres_form_html + ="<input type='submit' name='genre' value='"+gen+"'>"

genres_form_html ="</form>"
styles= ["Ambient","Drone","Shoegaze","Pop Rock","Post Rock","Hard Rock","Prog Rock","Black Metal","Folk, World, & Country","Modern"]
styles_form_html ="<form action='/query'>"
for stl in styles:
    styles_form_html + ="<input type='submit' name='style' value='"+stl+"'>"

styles_form_html ="</form>"

homepage = """
<html><body>""" \
+ header_html \
+ all_form_html \
+ genres_form_html \
+ styles_form_html + \
"""
</body></html>

Upvotes: -1

Related Questions