Django HTML Form

HTML Form 이란?

• 웹 페이지에서 사용자가 데이터를 입력하고 이를 서버로 전송할 수 있게 해주는 인터페이스 요소.
• 주로 사용자가 작성한 텍스트, 선택한 옵션, 체크박스, 파일 업로드 등을 서버로 전송하기 위해 사용.
• <form> 태그로 정의되며, 태그 안에 다양한 종류의 입력 필드들을 포함할 수 있음.

<form action="전송할 URL" method="전송 방식">
    <!-- 입력 필드들 -->
</form>

• Form은 서버와 클라이언트 간의 데이터를 주고받는 중요한 역할을 하며, 서버는 이 데이터를 처리하고 응답을 클라이언트에게 다시 전송함.

주요 속성

• action: 사용자가 입력한 데이터를 전송할 서버의 URL을 지정함.
• method: 데이터를 전송할 방식을 지정함. 주로 GET과 POST가 사용됨.

---

데이터 전송

프로젝트 설정

• Django에서 사용자가 입력한 데이터를 서버로 전송하려면 urls.py, views.py, 그리고 템플릿 파일에서 필요한 설정을 해야 함.

• urls.py에는 경로 설정을 추가하여 특정 URL에 대해 뷰를 연결해야 함.

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("data-throw/", views.data_throw),
]

• views.py에서는 클라이언트의 요청을 처리할 뷰를 정의함. 이 뷰는 템플릿 파일을 렌더링하여 사용자가 볼 수 있는 웹 페이지를 반환함.

# views.py
from django.shortcuts import render

def data_throw(request):
    return render(request, "data_throw.html")

• 템플릿 파일인 data_throw.html은 사용자가 데이터를 입력할 수 있는 Form을 포함하며, 이 Form을 통해 데이터를 서버로 전송할 수 있음.

<!-- templates/data_throw.html -->
{% extends 'base.html' %}

{% block content %}
    <h1>Data Throw</h1>

    <form action="#" method="#">
        <input type="text" name="message">
    </form>
{% endblock content %}

HTML Form과 Input 설명

• Input 은 사용자가 데이터를 입력할 수 있는 필드를 제공하며, <input> 태그로 정의됨.

Input 속성	설명
type	입력 필드의 유형을 지정함 (예: text, password 등)
name	서버로 전송될 데이터의 키 값을 지정함
value	입력 필드의 초기 값을 설정함

• 이 속성들로 구성된 Form 을 통해 사용자가 입력한 데이터가 서버에 전송되어 처리됨.

Input type 종류

Input 타입	설명
text	단일 행 텍스트.
password	비밀번호. 입력된 문자는 모자이크 처리됨.
email	이메일 주소. 브라우저가 유효성 검사를 도와줌.
number	숫자. 최소-최대값 설정 가능.
date	날짜.
checkbox	체크박스.
radio	라디오 버튼.
file	파일 업로드용 입력 필드.
submit	Form을 제출하는 버튼. 클릭 시 Form이 서버로 전송됨.

---

데이터 받기

• Django에서 데이터를 수신하고 처리하는 방법을 구현하기 위해서는 urls.py, views.py, 그리고 템플릿 파일에서 필요한 설정을 해야 함.

프로젝트 설정

• urls.py 에 데이터를 수신할 경로를 추가해야 함.

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("data-catch/", views.data_catch),
]

• views.py 에서는 클라이언트로부터 데이터를 받아 템플릿에 전달하는 뷰를 설정.

# views.py
from django.shortcuts import render

def data_catch(request):
    message = request.GET.get("message")
    context = {
        "data": message,
    }
    return render(request, "data_catch.html", context)

• 템플릿 파일인 data_catch.html 은 서버로부터 받은 데이터를 화면에 표시할 수 있도록 수정.

<!-- templates/data_catch.html -->
{% extends 'base.html' %}

{% block content %}
    <h1>Data Catch</h1>
    
    <div>
        <h2>Current Data</h2>
        <p>Current data is: {{ data }}</p>
    </div>
    
    <a href="http://127.0.0.1:8000/data-throw/">다시 데이터 보내러가기</a>
{% endblock content %}

데이터 전송 - 수신 과정

• 사용자가 data_throw.html에서 데이터를 입력하고 "전송" 버튼을 누르면, Form에 정의된 action URL (/data-catch/)로 데이터가 전송됨.
• views.py에서 request.GET.get("message")를 사용해 클라이언트로부터 전송된 데이터를 수신하고, context 변수로 템플릿에 전달함.
• data_catch.html 템플릿에서 {{ data }}를 사용하여 서버에서 받은 데이터를 표시함.