폼(Form)이란?

폼(Form)

사용자가 입력한 데이터를 서버로 전송하기 위한 방식으로

웹 페이지에서 사용자의 데이터를 입력받을 수 있는 입력 양식을 말한다.

 

1. label과 input

폼은 form태그 안에 사용자의 입력을 받는 input 태그와 설명을 위한 label 태그의 쌍으로 구성된다.

 

2. for & id

각각의 input 태그와 label 태그를 묶어주기 위해서 label 태그에는 for 속성, input 태그에는 id를 사용한다.

for과 id 속성을 쓰고 싶지 않다면 label 태그로 input 태그를 감싼 형태를 사용하면 된다.

 

3. name

name은 입력된 데이터를 서버로 전송할 때, 서버에서 각각의 데이터를 구분하기 위한 속성이다.

name 속성이 있는 양식 요소만 값이 서버로 전달된다.

 

<form>
    <label for="title">제목</label>
    <input type="text" id="title" name="title">
</form>

<!--
<form>
    <label >제목
        <input type="text">
    </label>
</form>
-->

 

4. type

type은 입력할 값에 따른 유형을 나타내는 속성이다.

type에 따라 사용자가 브라우저에서 값을 입력하는 방식인 위젯이 달라진다.

(1) email

(2) password

(3) button

<input type="button" value="버튼입니다">

(4) radio

<input type="radio" id="male" name="gender" value="male">
<label for="male">남자</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">기타</label><br>

(5) checkbox

(6) date

<label for="birthday">생년월일</label>
<input type="date" id="birthday" name="birthday">

(7) file

<label for="userfiles">파일선택<label>
<input type="file" id="userfiles" name="userfiles" multiple>

 

(8) submit

전송을 위한 type

<input type="submit" value="전송하기">

5. form 속성

form에는 입력된 데이터를 전송할 서버의 URL을 지정하는 action과 폼 데이터를 담아서 서버에 요청할 때 어떤 방식으로 전송할지를 정하는 method 속성이 있다.

두가지 속성을 지정해주지 않으면 기본 값으로 

action에는 현재 url이 들어가고 method는 GET을 사용하게 된다.

<form action="/register" method="post"> 
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="제출하기">
</form>

 

<form이 처리되는 과정>

1. 클라이언트가 form을 작성하기 위해 서버에게 form 양식을 요청하고 (로그인 페이지 등...) -> GET

서버는 응답으로 언 바운드 폼(Unbound form)을 제공해준다.

(아직 데이터가 form에 묶여있지 않기 때문에 이 상태를 언바운드 폼이라고 한다.)

2. 사용자가 데이터를 입력해서 서버에게 전송한다 -> POST 방식으로 action에 해당하는 url로 전송한다.

3. 서버에서 입력된 데이터와 form을 합쳐서 하나의 형태로 만든다.

이걸 바인딩 이라고 한다.

이렇게 데이터와 합쳐진 form을 바운드 폼(bound form)이라고 한다.

4. 입력된 데이터가 올바르지 않다면 유효하지 않은 데이터이므로 사용자에게 다시 폼을 입력하게 한다.

5. 입력된 데이터가 올바르다면 서버에서 지정한 로직을 수행한다.

6. 작업이 끝났다면 사용자에게 응답으로 새로운 페이지를 안내한다.

 

GET: 서버로부터 데이터를 조회할 때 사용. 클라이언트는 요청하는 데이터를 URL에 담아서 보낸다

쿼리스트링(query string)을 사용해서 원하는 데이터를 상세하게 표현한다.

 

POST: 클라이언트가 서버의 데이터를 변경하는 요청을 할 때 사용.

이때는 민감한 정보가 그대로 노출되는 것을 방지하기 위해 쿼리 스트링을 사용하지 않고 메시지의 안쪽에 담는다.

CRUD 중 C,U,D는 POST 방식을, R은 GET 방식을 사용한다.

 

 

<Django에서의 form>

form.py 파일에 form을 구현하고 템플릿과 view에서 가져다가 사용하면 된다.

 

1. form 클래스를 작성한다.

하나의 폼 클래스가 하나의 폼이 되는 것이다.

form 클래스 정의는 model을 정의했던 것과 굉장히 유사하다.

 

모든 폼 클래스는 장고 forms의 Form클래스를 상속해서 구현한다.

클래스 내부에는 필요한 input 항목들을 구현해주면 된다.

from django import forms

class PostForm(forms.Form):
    title = forms.CharField(max_length=50, label="제목")
    #CharField는 기본적으로 한줄 입력을 위한 위젯을 가지고 있음
    
    content = forms.CharField(label="내용", widget=forms.Textarea)
    #기본으로 HTMl form태그 정할때 type을 정해주면 기본 위젯이 깔리는데 필요하면 이렇게 정의할 때 적어줄 수도 있다.
    #content는 기본 위젯인 한줄 입력으로는 부족하니까 Textarea로 설정해서 여러줄 작성이 가능하도록 설정해준다.

 

2. view의 해당 함수에서 객체를 만들어 템플릿으로 보내준다.

def post_create(request):
    post_form = PostForm()  
    return render(request,'posts/post_form.html',{'form':post_form} )

 

3. 템플릿에서 사용한다.

<form method='post'> {% csrf_token %} <!--내가 하지 않은걸 했다고 처리하는 이상한 요청들을 막는 보안 기술
 폼 처리를 할 때 사용-->
    {{form.as_ul}} <!--이렇게 view에서 넘겨준 걸 사용하면된다. 이렇게 적어주면 form에 대한 내용은 django가 알아서 form 클래스를 참고해서 만들어줌 -->
    <!--ul: unordered list--> 
    <input type="submit" value="전송">
</form>

 

그냥 {{form}}이라고 적어줘도 괜찮지만,

django에서는 다른 HTML 컴포넌트와 함께 구조적으로 render 할 수 있는 옵션을 제공하고 있다.

ul말고도 table, p태그로 렌더해주는 속성들이 있다.