[Django] Form templates render 알아보기

forms 을 사용하기 이전에는 templates 에서 하나씩 input 으로서 지정을 해주었습니다. 하지만 forms 를 쓰면

{{ form }}

만으로도 지정한 필드에 대한 모든 input을 만들 수 있습니다. 이렇기 때문에 각 input 에 대하여 세부적인 속성을 지정하거나 커스텀하는게 어려울 수 도 있습니다. 하지만 django 에서는 이러한 부분들을 다 지원해주고 있고 유용한 몇 가지 알아보도록 하겠습니다.

 

hidden input 지정

Post 라는 model 은 user_agent 라고 사용자의 브라우저 및 OS 에 대한 정보를 필요로 합니다.

# models.py

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=10)
    content = models.TextField()
    user_agent = models.CharField(max_length=100)

    def __str__(self):
        return self.title

 

그렇다면 이 정보를 유저가 직접 입력하는게 맞을까요? 그렇기 보다는 js 를 통해서 브라우저 내에서 자동으로 입력해줄 수 있습니다. 그러기 위해서는 이 필드를 hidden 으로 지정해주어야겠죠. 다음과 같이 widgets 을 통해서 HiddenInput 로 지정해줄 수 있습니다.

# forms.py

from django import forms
from . models import Post

from django_summernote.widgets import SummernoteWidget

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content', 'user_agent']
        widgets = {
            'user_agent': forms.HiddenInput
        }

 

navigator.userAgent 로서 사용자의 정보를 얻어올 수 있습니다.

<!-- core/post_form.html -->

<form action="" method="POST">
		{% csrf_token %}
  	<table>
      	{{form.as_table}}
  	</table> 
  	<input type="submit" value="제출">
</form>
<script>
  	var userAgent = document.getElementById('{{ form.user_agent.id_for_label }}')
    userAgent.value = navigator.userAgent;
  	// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
</script>

 

form 풀어쓰기

{{form}}

다음과 같이 form 하나로 전체적인 내용을 표현할 수 있지만 각각의 필드에 세부적으로 접근할 수도 있습니다.

<!-- label -->
{{ form.필드명.label_tag }}
<!-- input -->
{{ form.필드명 }}

다음과 같은 예시로 사용할 수도 있습니다.

<form action="" method="POST">
		{% csrf_token %}
  	<table>
     		<tr>
          	<td>{{ form.title.label_tag}}</td>
          	<td>{{ form.title }}</td>
      	</tr>
  	</table> 
  	<input type="submit" value="제출">
</form>

 

또한 form 을 순회하며 각 필드들에 접근도 가능합니다. 하지만 이럴 경우 hidden filed 와 일반적인 field 들을 모두 한 번에 다루기 때문에 별도의 작업을 추가적으로 필요로 합니다.

<form action="" method="POST">
  	{% csrf_token %}
  	<table>
      	{% for field in form %}
      		<tr>
            	<td>{{ field.label_tag }}</td>
            	<td>{{field}}</td>
      		</tr>
      	{% endfor %}    
  	</table> 
  	<input type="submit" value="제출">
</form>

 

위 방법보다는 form 에서 hidden_fields 와 visible_fields 에 직접 접근하여 이에 대해 순회하면 더 편하고 깔끔하게 작성하실 수 있습니다.

<form action="" method="POST">
    {% csrf_token %}
    {% for field in form.hidden_fields %}
        {{field}}
    {% endfor %}
    <table>
        {% for field in form.visible_fields %}
            <tr>
                <td>{{ field.label_tag }}</td>
                <td>{{field}}</td>
            </tr>

        {% endfor %}
        
    </table> 
    <input type="submit" value="제출">
</form>