Django 양식 입력에 대한 사용자 정의 CSS

HTML 양식을 렌더링하는 것이 Django의 가장 큰 편리함 중 하나라고 생각합니다.

단점은 생성된 양식의 구조를 사용자 정의할 수 없다는 것입니다. 특정 디자인이 있고 다른 위치에 입력을 배치해야 하는 경우 Django는 다음과 같이 입력 제어 수준에서 render each element individually 방법을 제공합니다.

<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Subject:</label>
    {{ form.subject }}
</div>

템플릿.html

그러나 사용자 지정 문제는 여전히 남아 있습니다. 개별 입력 컨트롤에 사용자 지정 클래스를 설정할 수 없습니다. {{ form.subject }}는 사용자 지정 클래스를 설정할 기회를 주지 않고 입력 컨트롤을 렌더링합니다.

이는 대부분의 CSS 프레임워크(예: Bootstrap , Bulma )에서 특정 클래스를 입력 컨트롤에 설정하여 적절한 스타일을 지정하도록 요구하기 때문에 문제가 됩니다.

한 가지 해결책은 Form 개체에서 이러한 클래스를 설정하는 것입니다.

class ExampleForm(forms.Form):
   subject = forms.CharField(
       widget=forms.TextInput(attrs={'class':'input-text'}))
   enabled = forms.BooleanField(
       widget=forms.TextInput(attrs={'class':'input-checkbox'}))

form.py

그러나 제 생각에는 이것은 다른 문제를 만듭니다. Form 개체는 해당 입력의 데이터 유형 및 기타 비즈니스 논리 요구 사항을 사용하여 양식을 모델링해야 합니다. 스타일 및 기타 시각적 속성을 담당하지 않습니다. 이러한 스타일링 지침을 위한 장소는 템플릿입니다.

안타깝게도 외부 라이브러리를 사용하지 않고 Django에서 이를 수행하는 기본 제공 방법이 없다고 생각합니다. 그러나 두려워하지 마십시오. django-widget-tweaks 이라는 작업을 정확히 수행하는 작고 가벼운 라이브러리가 있습니다.

이 라이브러리를 사용하여 사용자 정의 CSS 클래스 등을 입력 컨트롤에 설정할 수 있으며 양식의 모든 위치 지정 및 스타일 지정이 논리적으로 속한 템플릿에서 이를 설정할 수 있습니다.

{% load widget_tweaks %}

<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Subject:</label>
    {{ form.subject|add_class:"input-text" }}
</div>

<div class="fieldWrapper">
    {{ form.enabled.errors }}
    <label for="{{ form.enabled.id_for_label }}">Enabled:</label>
    {{ form.enabled|add_class:"input-checkbox" }}
</div>

템플릿.html

라이브러리는 양식 컨트롤을 사용자 지정하는 데 훨씬 더 많은 옵션을 제공합니다. 이것이 당신의 관심을 끌었다면 살펴보십시오!
Form 모델에서 스타일 지정 지침을 혼합하지 않고 Django 양식을 사용자 정의하는 방법을 배웠기를 바랍니다.

즐거운 코딩하세요!