[python] Flask-WTF에서 라디오 박스, 체크 박스 등의 다양한 폼 요소를 사용하는 방법은 어떻게 되나요?

23 Nov 2023

python

Flask-WTF는 Flask와 함께 사용되는 WTForms 라이브러리의 확장판으로, 웹 어플리케이션의 폼을 구성할 때 유용하게 사용됩니다. 다양한 폼 요소를 사용하기 위해 다음의 단계를 따라주세요.

Flask-WTF 설치하기

먼저 Flask-WTF를 설치해야 합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 설치할 수 있습니다:

pip install Flask-WTF

폼 클래스 만들기

다음으로, 폼 요소를 담을 폼 클래스를 만들어야 합니다. 이 폼 클래스는 WTForms를 상속받아 구현됩니다.

from flask_wtf import FlaskForm
from wtforms import StringField, RadioField, BooleanField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')], validators=[DataRequired()])
    agree_terms = BooleanField('I agree to the terms', validators=[DataRequired()])

위의 코드에서는 StringField, RadioField, BooleanField와 같은 WTForms의 필드들을 사용하고 있습니다. validators 파라미터를 사용하여 필드에 유효성 검사를 추가할 수도 있습니다.

Flask 뷰 함수에서 폼 사용하기

폼 클래스를 만든 후에는 Flask 뷰 함수에서 이를 사용할 수 있습니다. 아래는 폼을 렌더링하고 사용자로부터 입력을 받아 처리하는 예시입니다.

from flask import Flask, render_template, request
from flask_wtf import FlaskForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

@app.route('/form', methods=['GET', 'POST'])
def form():
    my_form = MyForm()

    if request.method == 'POST' and my_form.validate_on_submit():
        name = my_form.name.data
        gender = my_form.gender.data
        agree_terms = my_form.agree_terms.data

        # 데이터 처리 로직 추가

    return render_template('form.html', form=my_form)

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

위의 코드에서는 /form 라우트에 대한 GET과 POST 요청 모두를 처리합니다. 폼이 유효한 데이터를 제출하면 데이터를 처리하는 로직을 추가할 수 있습니다.

HTML 템플릿 작성하기

마지막으로, HTML 템플릿을 작성하여 폼을 렌더링할 수 있습니다. 아래는 form.html 파일의 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Form</title>
</head>
<body>
    <h1>Form</h1>

    <form method="POST" action="{{ url_for('form') }}">
        {{ form.hidden_tag() }}

        <div>
            {{ form.name.label }} {{ form.name() }}
        </div>

        <div>
            {{ form.gender.label }} {{ form.gender() }}
        </div>

        <div>
            {{ form.agree_terms.label }} {{ form.agree_terms() }}
        </div>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

위의 코드에서는 FlaskForm의 객체인 form을 사용하여 각 필드를 렌더링하고, 사용자로부터 입력을 받습니다. 이후 제출 버튼을 클릭하면 /form 라우트로 POST 요청이 전송됩니다.

이제 Flask-WTF를 사용하여 라디오 박스, 체크 박스 등 다양한 폼 요소를 적용하는 방법을 알게 되었습니다. Flask-WTF의 문서에서 더 자세한 내용을 확인할 수 있으니 참고하시기 바랍니다.

참고 문서: Flask-WTF 문서