[python] Flask-WTF에서 입력 폼의 템플릿을 커스터마이징하는 방법은 어떻게 되나요?

23 Nov 2023

python

가장 간단한 방법은 WTForms의 기본 템플릿을 사용하여 폼 요소를 표시하는 것입니다. 먼저, 폼 클래스를 정의하고 필요한 필드를 추가합니다. 그런 다음, 템플릿에서 폼 필드를 렌더링하면 됩니다.

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    submit = SubmitField('Submit')

위의 코드는 이름을 입력 받는 필드와 제출 버튼을 가진 간단한 폼을 정의하는 예시입니다.

Jinja2의 템플릿 엔진을 통해 이 폼을 렌더링합니다. 폼을 렌더링하기 위해 폼 인스턴스를 템플릿에 전달해야 합니다. 이를 위해 render_template 함수를 사용할 수 있습니다. 또한, 필드를 개별적으로 렌더링할 수도 있습니다.

<!-- 폼 전체를 렌더링하는 예시 -->
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
    <h1>My Form</h1>
    <form method="POST" action="{{ url_for('submit_form') }}">
        {{ form.hidden_tag() }}
        {{ wtf.form_field(form.name) }}
        {{ wtf.form_field(form.submit) }}
    </form>
{% endblock %}

위의 코드에서는 bootstrap 템플릿을 사용하여 폼을 렌더링하였습니다.

또 다른 방법은 커스텀 템플릿 파일을 작성하는 것입니다. WTForms는 기본적으로 bootstrap 템플릿을 제공하지만, 이를 확장하여 나만의 템플릿을 작성할 수도 있습니다. 이를 위해서는 Jinja2의 상속 기능을 사용하고 필요한 블록들을 재정의하면 됩니다.

<!-- 커스텀 템플릿 예시 -->
{% extends "base.html" %}

{% block content %}
    <h1>My Form</h1>
    <form method="POST" action="{{ url_for('submit_form') }}">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }}
            {{ form.name(class='form-control') }}
            {% if form.name.errors %}
                <ul class="errors">
                    {% for error in form.name.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
        <div>
            {{ form.submit(class='btn btn-primary') }}
        </div>
    </form>
{% endblock %}

위의 예시는 form-control 클래스를 사용하여 입력 필드를 스타일링하고, 에러 메시지를 표시하는 코드입니다.

이처럼 Flask-WTF에서 폼 템플릿을 커스터마이징하는 방법은 다양하지만, 주어진 예시를 참고하면 시작할 수 있을 것입니다.

참고 문서: