Django(장고) 템플릿(HTML) 태그 <form></form>

장현웅·2023년 9월 3일

Django 탬플릿 태그 <form></form>

HTML 폼(form)을 생성하기 위한 Django 탬플릿 언어의 탬플릿 태그 중 하나로, 한 개 이상의 input 요소를 포함하는 <form></form> 태그의 요소들의 집합으로 정의된다.
<form action="/todo/" method="POST">
  <input type="text">
  <button type="submit"> 추가 </button>
</form>
type="submit"
모든 input 요소의 데이터가 서버로 업로드

action 속성
Form이 submit될 때 처리가 필요한 데이터가 전송될 URL 주소를 지정한다. 미설정시 현재 페이지 URL로 다시 제출된다.

method 속성
클라이언트의 HTTP 요청 방식

HTTP 요청 Method

HTTP POST : 게시물 생성
서버로 데이터를 제출하고 데이터를 처리하도록 요청
주로 폼 데이터나 파일 업로드와 같은 작업에 사용

HTTP GET : 게시물 조회
리소스를 서버에서 읽어오도록 요청
주로 정보를 요청하는데 사용
GET 요청은 보통 브라우저 주소 표시줄에 나타남.
(URL conf 참고)

HTTP PUT 또는 PATCH : 게시물 수정

PUT
서버에 리소스를 저장하도록 요청
주로 업데이트 작업에 사용
전체 리소스를 업데이트할 때 주로 활용

PATCH
서버에 리소스의 일부를 업데이트하도록 요청
일부 데이터만 업데이트하는 데 사용

HTTP DELETE : 게시물 삭제
서버에서 리소스를 삭제하도록 요청
주로 리소스를 삭제하는 데 사용

HTML 폼(form)이란?

웹 페이지에서 클라이언트로부터 정보를 입력받거나 전송하는데 사용되는 웹 요소이다. 폼(form)을 통해 사용자는 텍스트 입력, 체크박스 등 다양한 입력 필드를 통해 정보를 제공하고, 이 정보는 웹 서버로 전송된다.
ex) 로그인 폼, 회원가입 폼 등

HTML 폼은 웹 어플리케이션에서 사용자 입력을 처리하고 서버로 데이터를 전송하는 데 중요한 역할을 한다.

HTML에서 사용자로부터 데이터를 입력받는데 사용되는 Input 요소들

Text Input : 단일 행의 텍스트를 입력할 때 사용
<input type="text" name="username">
Password Input: 비밀번호를 입력할 때 사용
<input type="password" name="password">
Textarea: 여러 줄의 텍스트를 입력할 때 사용
<textarea name="" rows="" cols=""></textarea>
Radio Buttons: 여러 옵션 중 하나를 선택할 때 사용
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
남성
여성

Checkboxes: 여러 옵션 중 여러 개를 선택할 때 사용
<input type="checkbox" name="fruits" value="orange"> 오렌지
<input type="checkbox" name="fruits" value="strawberry"> 딸기
<input type="checkbox" name="fruits" value="watermelon"> 수박
오렌지
딸기
수박

Select Dropdown: 드롭다운 메뉴에서 항목을 선택할 때 사용
<select name="country">
  <option value="usa">미국</option>
  <option value="canada">캐나다</option>
  <option value="uk">영국</option>
</select>
미국 캐나다 영국

File Input: 파일 업로드를 위해 사용
<input type="file" name="file">

HTML 폼(form)을 통해 클라이언트가 제공하는 정보를 데이터베이스에 저장하는 과정

클라이언트는 위에 정리된 다양한 input 요소들 (입력 필드들)에 데이터를 입력하고, 제출 버튼을 클릭

입력한 데이터는 HTTP POST 또는 HTTP GET 요청의 본문(body)에 포함되어 서버로 전송된다.

서버의 views.py에서 전송된 데이터를 처리한다. 이 데이터는 일반적으로 key와 value 쌍으로 구성되어 있으며, 각 입력 필드는 HTML 폼(form)의 <body></body>태그에서 지정한 'name'속성을 키(key)로 가지고, 클라이언트의 입력값을 해당 키의 값(value)로 데이터베이스에 전달된다.

데이터베이스가 서버에서 데이터를 받으면, View 함수의 로직에 따라 저장된다. 데이터베이스는 Django ORM을 사용하여 모델 데이터와 HTML 폼을 연결하여 상호작용하면서 데이터를 저장하거나 업데이트 할 수 있다.