현재 장고 로그인을 html 에 form 태그를 써서 만들었는데 이를 장고에서 제공하는 forms.py 를 상속받아 구현해 본다.
장고에서 form 태그에 필요한 필드들을 만들어주고 관리를 해주므로 가독성과 편리함에 유리하다고 한다.
기존에 작성한 login.html 에서 username 과 password 관련된 html 코드를 (제출 버튼만 제외하고) 지운 뒤, 장고에서 제공하는 form 을 사용해 보자.
1. forms.py
먼저, 앱 (member) 내에 forms.py 를 생성한다.
from django import forms
class LoginForm(forms.Form):
# LoginForm 에서 입력받을 값은 2개 (아이디, 패스워드)
username = forms.CharField(max_length=100)
password = forms.CharField(max_length=100)2. views.py
기존에 정의한 login 함수에서 return render 부분만 남기고 다 지운다.
기존 코드가 아닌 forms.py 내 LoginForm 을 상속받아 올 것이다.
그리고 render 에 정의해 놓은 클래스 변수 form 을 넣고,
def login(request):
form = LoginForm()
return render(request, 'login.html', {'form': form})3. login.html
{% csrf_token %} 아래에 {{ form }} 이라 써넣고 어떻게 보여지는지 확인해보았다.
필드가 만들어져 있기는 하지만 장고가 자동으로 생성해주는 포맷이라서 지정한 클래스 의 css 등이 제대로 보여지지 않는다.
login 버튼을 눌러보면 입력값을 넣으라고 문구가 자동으로 뜨는데, 장고가 이런 것들을 자동으로 검증해 준다는 것을 알 수 있다.
그리고 비밀번호 필드에 무언가를 입력하면 의도에 맞지 않게 비밀번호가 텍스트로 나온다.
이제 의도에 맞게 html 내에서 form 을 커스터 마이징 해야 한다.
4. 커스터마이징 form (in login.html)
{{ form }} 을 지운 뒤, 반복문을 템플릿 안에서 돌리기 위해 {% for field in form %} 을 입력한다.
그리고 그 아래에 기존 사용했던 input type 베이스 코드를 넣는다.
마지막에는 {% endfor %} 코드를 넣어 준다.
{% for field in form %}
<div class="form-group">
<label for=""></label>
<input type="" class="form-control" id="" placeholder="" name=""/>
</div>
{% endfor %}브라우저로 확인해보면 한층 의도한 대로 비슷해졌지만 수정해야 할 부분이 보인다.
아래 코드를 넣어 위의 코드를 수정하였다.
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
<input
type="{{ field.field.widget.input_type }}"
class="form-control"
id="{{ field.id_for_label }}"
placeholder="{{ field.label }}"
name="{{ field.name }}"
/>
</div>form 의 field 별로 다양한 속성이 있는 듯 싶다.
-
field.id_for_label
: field 의 id 입력을 위한 레이블 -
field.label
: 단순 표현을 위한 레이블 -
field.field.widget.input_type
: 해당 필드가 웹페이지에서 입력받아야 할 input tag 의 타입 -
field.name
: 해당 필드의 name
이제 다시 화면을 확인해 보면, 유사해 지는 중이지만 여전히 비밀번호 필드는 문자로 입력되는 것을 확인할 수 있다.
5. forms.py 에서 LoginForm 필드 수정하기
보여지는 label 을 바꿔보고 비밀번호를 텍스트가 아닌 패스워드 타입으로 만들어 보자.
class LoginForm(forms.Form):
username = forms.CharField(max_length=100, label="사용자 이름")
# 비밀번호를 텍스트가 아닌 패스워드 타입으로 만들려면 widget 을 지정해야 한다.
password = forms.CharField(widget=forms.PasswordInput, label="비밀번호")이제 Form 을 이용한 화면 만들기를 완료했다.
다음은 실제 로그인 시 동작하고 값을 검증하는 과정에 대한 코드를 forms 에 작성해 보자.
