Django Forms는 기본적인 데이터 입력 기능을 제공하지만, 사용자 경험을 향상시키기 위해 폼을 스타일링하는 것이 중요합니다. 이 글에서는 Django Forms를 CSS로 꾸미는 방법과 실전 사례를 살펴보겠습니다.

1. 기본 HTML 폼과 Django Forms

1.1 기본 Django Forms 출력 방식

Django Forms는 기본적으로 HTML을 자동 생성합니다. 기본 출력 방식은 다음과 같습니다:

• as_p: 각 필드를 <p> 태그로 감쌈.
• as_table: 각 필드를 <tr> 태그로 렌더링.
• as_ul: 각 필드를 <li> 태그로 감쌈.

예제: 기본 출력 방식

class ExampleForm(forms.Form):
    name = forms.CharField(label="Your Name")
    email = forms.EmailField(label="Your Email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

위 코드는 <p> 태그로 감싸진 기본 스타일로 출력됩니다.

2. CSS와 함께 폼 스타일링

2.1 attrs 속성과 Bootstrap을 활용한 스타일 적용

attrs 속성을 사용하면 HTML 태그에 직접 CSS 클래스를 추가할 수 있습니다. 이를 통해 Bootstrap과 같은 CSS 프레임워크를 손쉽게 적용할 수 있습니다.

예제: attrs로 Bootstrap 스타일 적용

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

템플릿에서 폼 렌더링

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

결과 HTML 예시

<input type="text" name="username" class="form-control" placeholder="Enter your username">
<input type="password" name="password" class="form-control" placeholder="Enter your password">

2.2 Bootstrap과 함께 사용하는 폼 스타일링

예제: Bootstrap 스타일 적용

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

템플릿에서 폼 렌더링

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

결과 화면

• 부트스트랩 스타일이 적용된 폼 필드와 버튼이 렌더링됩니다.

3. Django FormHelper와 라이브러리 활용

3.1 django-crispy-forms 소개

django-crispy-forms는 Django Forms에 대해 더 나은 스타일링과 레이아웃 관리를 제공합니다.

설치

pip install django-crispy-forms

설정

settings.py에 다음을 추가합니다:

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

폼 정의

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Your Email")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit'))

주의점

django-crispy-forms는 간단한 폼 스타일링에는 유용하지만, 초기화 메서드 __init__을 제대로 구성하지 않을 경우 템플릿 디버그 로그가 지나치게 많아질 수 있습니다. 로그 파일을 정리된 상태로 유지하고 싶다면 이 점을 주의해야 합니다. debug로깅을 끄고 작업하는 개발자나, log가 지저분해지는 것을 신경쓰지 않는 개발자에게는 추천하지만, 저 개인적으로는 좋아하지 않는 스타일링 방식이긴 합니다. debug log 발생을 막기 위해 초기화 메서드를 완벽하게 셋팅해야하고, 그러기 위해서는 소스코드를 파고들어 분석을 해야하는데, 그럴 바에는 그냥 다른 방식으로 스타일링 하게됩니다.

템플릿에서 사용

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. 실전 사례: 회원가입 폼 스타일링

4.1 폼 정의

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your email'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

4.2 템플릿에서 렌더링

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Sign Up</button>
</form>

5. 결론

Django Forms와 CSS를 활용하면 사용자 경험을 크게 개선할 수 있습니다. attrs를 사용한 기본 스타일링부터, Bootstrap 및 django-crispy-forms 같은 라이브러리를 활용한 고급 스타일링까지 다양한 방법을 적용해 보세요. 그리고 django-crispy-forms 사용시 __init__초기화 메서드 설정에 신경을 써야 로그파일이 깨끗해진다는 것, 잊지마세요~! 

다음 글에서는 Django Forms의 고급 사용법에 대해 다룰 예정입니다.