Django 로 게시판 만들기(14). 장고 Form

teddybearjung·2020년 7월 27일
0

게시판만들기

목록 보기
14/21

현재 장고 로그인을 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 에 작성해 보자.

profile
.

0개의 댓글