Form API 6편 - HTML 로 폼 출력하기

Outputting forms as HTML

폼 객체의 두번째 작업은, 스스로 HTML 태그로 렌더를 해주는것입니다.

forms.py 가 아래와 같이 작성 되어 있고.

from django import forms 


class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(widget=forms.Textarea)
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

shell 에서 아래와 같이 폼을 프린트 해보면,

폼이 저절로 HTML 로 렌더되는것을 확인할수 있습니다

from classviewsforms.forms import ContactForm 

f = ContactForm() 

print(f)

만약 폼이 데이터를 가지고 있으면, HTML 로 출력 될때, HTML 태그는 데이터를 적절하게 포함하고 있습니다.

예를들어, 필드가 <input type="text"> 라고 표시가 되어 있으면, 데이터는 value 속성에 있을것입니다.

만약 필드가 <input type="checkbox">로 표시되어 있으면, 적절한 경우, checked 를 포함하고 있을겁니다.

In [4]: data = {'subject': 'hello', 
   ...:         'message': 'Hi there', 
   ...:         'sender': 'foo@example.com', 
   ...:         'cc_myself': True}                                                                

In [5]: f = ContactForm(data)                                                                     

In [6]: print(f)                                                                                  
<tr><th><label for="id_subject">Subject:</label></th><td><input type="text" name="subject" value="hello" maxlength="100" required id="id_subject"></td></tr>
<tr><th><label for="id_message">Message:</label></th><td><textarea name="message" cols="40" rows="10" required id="id_message">
Hi there</textarea></td></tr>
<tr><th><label for="id_sender">Sender:</label></th><td><input type="email" name="sender" value="foo@example.com" required id="id_sender"></td></tr>
<tr><th><label for="id_cc_myself">Cc myself:</label></th><td><input type="checkbox" name="cc_myself" id="id_cc_myself" checked></td></tr>

이런 기본 출력 방식은, 각 필드들에 <tr> 을 가지고 있는, 그리고 두개의 컬럼으로 되어 있는 HTML 테이블이 됩니다. 아래 사항들을 짚고 넘어갑니다.

유연성을 위해서, 폼의 기본 출력값은 <table></table> 태그를 가지고 있지 않습니다
<form></form> 태그도 가지고 있지 않습니다
<input type="submit"> 태그도 가지고 있지 않습니다.

위에 있는 태그들이 기본 출력에 포함되지 않습니다.

따라서, HTML 템플릿에 위 3개의 테그는 여러분들이 필요에 의해서 추가해 주어야 할 테그들 입니다

추가적으로, POST 폼을 사용하기전에 csrf_token 을 사용하는것도 잊지 않아야 합니다!

각 필드 타입은, 기본 HTML 태그를 가지고 있습니다. 예를들어 ,

CharField 는 <input type="text">
EmailField 는 <input type="email">
BooleanField(null=False) 는 <input type="checkbox">

이 태그들은 기본값일 뿐입니다. 우리는 widget 을 사용하여, 어떤 HTML 을 사용할것인지 지정할수 있습니다.

각 테그를 위한 HTML 이름은, ContactForm 클래스 안 속성이름을 직접 가져옵니다
각 필드를 위한 label. 예) Subject, Message, Cc myself 들은 필드명의 언더스코어를 공백으로 전환하고, 첫번째 글자를 대문자해서 생겨납니다. 이것도 그저 기본값일 뿐입니다. 우리는 이 label 도 수동으로 지정할수 있습니다
각 텍스트 레이블은 <label> HTML 태그안에 감싸져 있습니다. 이는 필드의 id 를 가르키고 있습니다. id 는 필드명앞에 id 를 붙여서 생성됩니다. id 속성과 <label> 태그들은 기본값으로 출력값에 포함되어 있습니다만. 이 동작도 변경할수 있습니다.
출력되는 HTML 은 HTML5 문법을 사용합니다.

print 를 사용하여 form 을 출력했을때, <table> 이 기본 출력 스타일 일지라도, 다른 출력 스타일들이 존재할수 있습니다. 각 스타일은 폼 객체의 메서드로 존재하고. 각 렌더링 메서드는 문자열을 반환합니다.