Flask Form을 활용해보자

기본 구조와 폼 클래스 생성

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

class InfoForm(FlaskForm):
    breed = StringField("What Breed are you?")
    submit = SubmitField('Submit')
    
@app.route('/', methods=['GET', 'POST']) # 127.0.0.1:5000
def index():
    breed = False
    form = InfoForm()
    if form.validate_on_submit():
        breed = form.breed.data
        form.breed.data = ''
    return render_template('index.html', form=form, breed=breed)

Flask Form을 사용하기 위해 필요한 패키지와 클래스를 임포트 하고, InfoForm 클래스를 생성합니다. 이 클래스는 사용자로부터 견종(breed)을 입력받는 폼을 정의합니다. 웹 페이지에서 폼을 렌더링 하고 입력 데이터를 받아온 후, 유효성 검사를 통해 처리합니다.

<p>
    {% if breed %}
    the breed you entered is {{breed}}
    Update it in the form below:
    {% else %}
    Plese enter your breed:
    {% endif %}
</p>

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.breed.label }}{{ form.breed() }}
    {{ form.submit }}
</form>

템플릿을 활용하여 폼과 데이터를 렌더링합니다. 입력한 견종(breed)을 출력하고, 사용자 입력을 받기 위한 폼을 생성합니다. hidden_tag()는 보안을 위한 숨겨진 필드를 생성하는 메서드입니다

필드와 검증자 활용

폼 필드를 더 다양하게 사용하기 위해 StringField, BooleanField, RadioField, SelectField, TextAreaField 등을 활용합니다. 또한 DataRequired 검증자를 이용하여 필수 입력 항목임을 검증합니다.

from flask import Flask, render_template, session, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, BooleanField, DateTimeField, RadioField, SelectField, TextAreaField, SubmitField

# DataRequired = 검증자 submit 을 누르기 전에 작성을 해야됨.
from wtforms.validators import DataRequired

app = Flask(__name__)

app.config['SECRET_KEY'] = 'mykey'

# Form 파일
class InfoForm(FlaskForm):
    
    # breed 속성.  
    breed = StringField("What breed are you?", validators=[DataRequired()])
    
    neutered = BooleanField("Have you been neutered?")
    mood = RadioField("Please choose your mood:",
                    choices=[('mood_one', 'Happy'), ('mood_two', 'Excited')])
    food_choice = SelectField(u'Pick your favorite food:',
                            choices=[('chi', 'Chicken'), ('bf', 'Beef'), ('fish', 'Fish')])
    feedback = TextAreaField()
    submit = SubmitField('submit')

세션과 리디렉션

@app.route('/', methods=['get', 'post'])
def index():
    
    form = InfoForm()
    if form.validate_on_submit(): # 검증자 역활
        session['breed'] = form.breed.data # form.속성.data
        session['neutered'] = form.neutered.data
        session['mood'] = form.mood.data
        session['food'] = form.food_choice.data
        session['feedback'] = form.feedback.data
        
        return  redirect(url_for('thankyou'))
        
    return render_template('index.html', form=form) 

@app.route('/thankyou')
def thankyou():
    return render_template('thankyou.html')

if __name__ == '__main__':
    app.run(debug=True)

입력한 데이터를 세션에 저장하여 다른 페이지로 전달하거나 유지할 수 있습니다. 또한 redirect와 url_for를 사용하여 제출 후 자동으로 다른 페이지로 리디렉션 되도록 설정할 수 있습니다.

결과 페이지 출력

<!-- thankyou.html -->
<h1>
    Thank you. Here is the info you gave us:
</h1>
<ul>
    <li>Breed: {{ session['bread'] }}</li>
    <li>{{ session['neutered'] }}</li>
    <li>Mood: {{ session['mood'] }}</li>
    <li>Food: {{ session['food'] }}</li>
    <li>Feedback: {{ session['feedback'] }}</li>
</ul>

마지막으로 결과 페이지에서는 세션에 저장한 데이터를 출력하여 사용자가 입력한 정보를 확인할 수 있도록 합니다.