#6-1. HTML Form 사용 방법(method :: get, post)

# HTML에서 사용되는 form 요소를 알아보겠습니다.
# from 사용 문법을 배우도록 하겠습니다.
# method 속성의 get , post에 대해 배우고 그 장,단점에 대해 배워보도록 하겠습니다.

# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

Form 요소

 

---

 

1) form 요소란?

웹 페이지에서는 form요소를 사용하여 사용자로부터 입력을 받을 수 있습니다.
또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form요소를 사용합니다.

문법: <form action="처리할 페이지 주소" method="get|post"></form>

• action: 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야 합니다.
  (이렇게 전달 받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다.)
• method: 입력받은 데이터를 서버에 전달할 방식을 명시합니다.

 

---

 

2) method 속성

method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET방식과 POST방식으로 나뉩니다.

GET 방식

주소에 데이터(data)를 추가하여 전달하는 방식
데이터가 주소 입력창에 그대로 나타남
전송할 수 있는 크기 또한 제한적임
따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용

<!-- 해당 HTML은 python의 웹 프레임워크인 Django의 template에서 사용한 예시입니다. -->
<form action="{% url 'myapp:myurl' value.data %}" method="get">
  <td scope="row">{{ value.sup_id }}</td>
  <td scope="row">{{ value.sup_name }}</td>
  <td scope="row">
  	<input type="submit" value="CREATE" class="btn btn-outline-secondary btn-sm">
  </td>
</form>

네이버 검색엔진의 get 방식 _ 쿼리(query)를 보내고 검색어인 "구글"이라는 단어가 노출됩니다.

POST 방식

데이터(data)를 별도로 첨부하여 전달하는 방식
데이터가 외부에 드러나지 않음
전송할 수 있는 데이터의 크기 또한 제한이 없음
보안성 및 활용성이 GET 방식보다 좋음

<!-- 해당 HTML은 python의 웹 프레임워크인 Django의 template에서 사용된 예시입니다. -->
<form action="." method="post" autocomplete="off"> {% csrf_token %}
	<select name="TableID">
		<option value="cat_id">CAT ID</option>
		<option value="sup_id">SUP ID</option>
	</select>
	<b>{{ form.as_table }}</b>
	<input type="submit" value="검색" class="btn btn-outline-secondary btn-sm" id="search button">
</form>

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.