Django 양식에서 CSS 클래스 정의하기

Django 양식에서 CSS 클래스 정의하기

위젯 속성 사용

가장 간단한 방법은 widget 속성을 사용하여 CSS 클래스를 지정하는 것입니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.

from django.forms import ModelForm

class MyForm(ModelForm):
    class Meta:
        model = MyModel
        fields = ['name', 'email']

        widgets = {
            'name': forms.TextInput(attrs={'class': 'my-name-class'}),
            'email': forms.EmailInput(attrs={'class': 'my-email-class'}),
        }

이 코드는 name 필드와 email 필드에 각각 my-name-class와 my-email-class라는 CSS 클래스를 지정합니다.

템플릿 태그 사용

템플릿에서 {% render_field %} 태그를 사용하여 CSS 클래스를 지정할 수도 있습니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.

{% load widget_tweaks %}

<form action="{% url 'my_view' %}" method="post">
    {% csrf_token %}
    {{ form.name|render_field class="my-name-class" }}
    {{ form.email|render_field class="my-email-class" }}
    <button type="submit">Submit</button>
</form>

템플릿 필터 사용

{% load widget_tweaks %}

<form action="{% url 'my_view' %}" method="post">
    {% csrf_token %}
    {{ form.name|add_class:"my-name-class" }}
    {{ form.email|add_class:"my-email-class" }}
    <button type="submit">Submit</button>
</form>

위젯 클래스 사용

사용자 정의 위젯 클래스를 만들어 CSS 클래스를 정의할 수도 있습니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.

from django.forms import widgets

class MyTextInput(widgets.TextInput):
    def __init__(self, attrs=None):
        super().__init__(attrs)
        self.attrs['class'] = 'my-text-input-class'

class MyEmailInput(widgets.EmailInput):
    def __init__(self, attrs=None):
        super().__init__(attrs)
        self.attrs['class'] = 'my-email-input-class'


class MyForm(ModelForm):
    class Meta:
        model = MyModel
        fields = ['name', 'email']

        widgets = {
            'name': MyTextInput(),
            'email': MyEmailInput(),
        }

예제 코드

from django.forms import ModelForm

class MyModel(models.Model):
    name = models.CharField(max_length=255)
    email = models.EmailField()


class MyForm(ModelForm):
    class Meta:
        model = MyModel
        fields = ['name', 'email']

        widgets = {
            'name': forms.TextInput(attrs={'class': 'my-name-class'}),
            'email': forms.EmailInput(attrs={'class': 'my-email-class'}),
        }

{% load widget_tweaks %}

<form action="{% url 'my_view' %}" method="post">
    {% csrf_token %}
    {{ form.name|render_field }}
    {{ form.email|render_field }}
    <button type="submit">Submit</button>
</form>

이 코드는 다음과 같은 HTML을 생성합니다.

<form action="/my_view/" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="...">
    <input type="text" name="name" class="my-name-class">
    <input type="email" name="email" class="my-email-class">
    <button type="submit">Submit</button>
</form>

추가 정보

Django 양식에서 CSS 클래스를 정의하는 대체 방법

class 속성 사용

class 속성을 사용하여 HTML 필드에 직접 CSS 클래스를 지정할 수 있습니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.

<form action="{% url 'my_view' %}" method="post">
    {% csrf_token %}
    <input type="text" name="name" class="my-name-class">
    <input type="email" name="email" class="my-email-class">
    <button type="submit">Submit</button>
</form>

JavaScript 사용

JavaScript를 사용하여 양식 필드에 CSS 클래스를 동적으로 추가할 수 있습니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.

<form action="{% url 'my_view' %}" method="post">
    {% csrf_token %}
    <input type="text" name="name" id="name">
    <input type="email" name="email" id="email">
    <button type="submit">Submit</button>
</form>

<script>
const nameField = document.getElementById('name');
nameField.classList.add('my-name-class');

const emailField = document.getElementById('email');
emailField.classList.add('my-email-class');
</script>

어떤 방법을 사용해야 할까요?

사용할 방법은 특정 상황에 따라 다릅니다.

• 간단한 경우 widget 속성이나 class 속성을 사용하는 것이 가장 좋습니다.
• 더 많은 제어권이 필요한 경우 사용자 정의 위젯 클래스를 만들거나 JavaScript를 사용하는 것이 좋습니다.