이 글에서는 Django 폼(form)에서 위젯(widget)을 사용하는 방법을 알아봅니다. 위젯은 프론트엔드 화면을 한층 더 보기 좋게 만들어 주는 강력한 도구입니다. 위젯이란 Django 폼이 렌더링하는 HTML 요소를 의미하며, textarea, input, password input 등이 모두 위젯에 해당합니다.
프로젝트 준비하기
먼저 Django 프로젝트와 앱을 생성합니다. 여기서는 프로젝트 이름을 "tutorial14", 앱 이름을 "djangoFormWidget"으로 지정했습니다.
이후 settings.py에 앱을 등록하고, 프로젝트의 urls.py에 앱의 URL을 포함시킵니다. 그리고 Templates 폴더, home.html, forms.py 등 기본적인 파일과 폴더도 함께 준비합니다.
예제 코드
1. 앱의 urls.py
from django.urls import path,include
from . import views
urlpatterns = [
path('',views.home,name="home")
]뷰(view)를 렌더링하기 위한 기본 URL 경로를 설정합니다.
2. views.py
from django.shortcuts import render
from .forms import CommentForm
# Create your views here.
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def home(request):
if request.method=='POST':
form=CommentForm(request.POST)
if form.is_valid():
form.save()
commentform=CommentForm()
return render(request,'home.html',{"commentform":commentform})여기서는 폼을 임포트하여 POST 요청과 GET 요청을 처리합니다. POST 요청 시에는 유효성 검사를 통과한 데이터를 저장하고, GET 요청 시에는 폼 객체를 템플릿(프론트엔드)으로 전달합니다.
3. models.py
from django.db import models
# Create your models here.
class CommentModel(models.Model):
comment=models.CharField(max_length=500)폼에서 사용할 모델을 정의합니다. 폼 데이터를 데이터베이스에 저장하려면 이 모델이 반드시 필요합니다.
4. home.html
<!DOCTYPE html>
<html>
<head>
<title>TUT</title>
</head>
<body>
{% for fm in commentform %}
<form method="post">
{%csrf_token%}
{{fm.errors}}<br>
{{fm.label}}:{{fm}}<br>
{%endfor%}
<button type="submit">Submit</button>
</form>
</body>
</html>폼을 화면에 렌더링하는 간단한 프론트엔드 템플릿입니다.
5. forms.py — 위젯 적용의 핵심
from django import forms
from .models import CommentModel
class CommentForm(forms.Form):
comment=forms.CharField(widget=forms.Textarea(attrs={'class':'comment','title':'add comment'})) # 이 줄이 위젯을 사용하는 부분입니다. TextArea 위젯을 지정했으며, attrs 속성으로 위젯에 class를 할당할 수 있습니다.
def save(self):
data=self.data
modelRef=CommentModel(comment=data['comment'])
modelRef.save()폼을 실제로 정의하는 파일입니다. Django가 기본 제공하는 폼 위젯 중 Textarea를 사용하여 일반 텍스트 입력 필드 대신 여러 줄 입력이 가능한 textarea를 렌더링했습니다. 특히 attrs 속성을 활용하면 위젯에 CSS 클래스나 title 같은 HTML 속성을 자유롭게 추가할 수 있어, 스타일링과 접근성 측면에서 매우 유용합니다.
실행 결과
위 코드를 실행하면 일반적인 텍스트 입력창이 아닌, textarea 위젯이 적용된 댓글 입력 폼이 화면에 나타납니다.
