Django 용어정리 (HTML Form)

---

Django 의 HTML Form 에 대해서 알아보자

---

HTML Form을 활용한 데이터 주고 받기

HTML Form은 사용자로부터 데이터를 입력받고 서버로 전송할 수 있도록 하는 웹 문서의 중요한 요소이다.

주로 로그인, 회원가입, 검색 과 같은 기능에 사용이 된다.

 

 

---

HTML Form 과 Input

Form 의 역활

• 사용자가 입력한 데이터를 서버로 전송한다.
• 인터랙티브 한 기능을 위한 공간을 제공한다.

 

 

---

Input

• Input 태그는 사용자의 입력을 받는 공간을 생성한다.
• 이때 태그마다의 특성이 다르며, type 속성에 따라서 다양한 방식을 지원하게 된다.

<form action="/submit" method="GET">
    <label for="username">이름:</label>
    <input type="text" id="username" name="username">

    <label for="birthdate">생년월일:</label>
    <input type="date" id="birthdate" name="birthdate">
    
    <button type="submit">제출</button>
</form>

 

 

---

Form 의 주요 속성

 

action

• 데이터가 어느 URL로 전송이 될지 정하는 역활.
• 지정되지 않는다면 현재 페이지의 URL로 전송한다.

 

이때 " location " 은 파일의 로케이션을 넣으면된다.

 

 

 

---

method

• 데이터를 전송하는 방식을 지정한다.
• GET 또는 POST방식을 사용한다.
  • GET은 데이터를 조회할 때 사용.
  • POST는 데이터를 서버에 등록할 때 사용.

 

 

 

---

for 과 id의 연동

위의 사진과 같이 label과 input의 for 과 id가 같다면, labe 을 클릭하더라도 input의 입력 창을 클릭한 것과 같은 효과를 준다.

 

 

 

---

GET 방식 데이터 전송

GET 방식이란?

GET방식의 데이터 전송이란 서버에 데이터를 조회하는 요청을 보내는 것이다.

이때 쿼리 스트링을 통해서 데이터를 URL에 포함시켜 같이 요청을 보내는것을 의미한다.

 

 

 

---

쿼리스트링의 구조

쿼리스트링은 URL뒤에 ?를 붙이고 key=value 즉 딕셔너리 형식으로 데이터를 전달을 한다.

 

여러개의 데이터는 & 를 사이에 두고 연결을 시킨다.

 

이때의 key = input의 name이고, value는 입력 값이다.

 

 

---

 GET 데이터를 View 에서 받기

서버에서 GET 요청과 함께 전송된 데이터를 처리한다.

Django에서 쿼리스트링으로 데이터를 보냈을 때 어떻게 처리하는지 보자.

 

 

---

View

우선 action 에서 어디로 데이터를 전송하게 설정했는지 파악한다.

 

이때 data-catch 란것을 확인하고 view 에서 data-catch를 호출하는 함수를 찾는다.

 

 

위와 같이 우선 data 변수에 GET.get(" name ")이 들어감으로 input 의 name즉 값을 받아온다.

 

context를 설정해줘서 실제로 형식을 지정해주고 render에 추가함으로써 view에서의 작업은 마무리 된다.

 

 

---

HTML

HTML에서는 크게 할 작업이 없다.

 

이미 값을 context로 입력을 해 줬기 때문에

 

{{ 변수 }} 를 이용해서 불러오기만 하면 된다.

 

 

 

 

 

---

과정

1. 사용자가 Form에 데이터를 입력하고 Submit버튼을 누르게 된다.
2. Form은 데이터를 action 에 지정된 location(URL) 로 method에 지정된 GET의 방식으로 전송한다.
   1. 이때 GET으로 데이터를 보냈으니 쿼리스트링으로 데이터를 포함하게 된다.
3. 서버의 View 함수가 요청을 처리하고, 이를 데이터 context에 담아서 template로 전송한다.
4. Template에서 {{ 변수 }} 를 사용하여서 데이터를 표시하게 된다.