IT'S YU
[HTML] form요소 / method속성 / get, post 본문
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>
출처: https://axce.tistory.com/26
'웹개발 > HTML' 카테고리의 다른 글
[HTML] 폼 관련 요소 - label과 input (0) | 2022.05.02 |
---|---|
[HTML] 식별자(id, class, name), <a> vs <form> (0) | 2022.04.29 |
[Spring] html / Thymleaf(타임리프) th 기본 문법 (0) | 2022.04.18 |
[HTML] div, span 태그 (0) | 2022.02.07 |
[HTML] attribute(속성) CSS property(속성)의 차이 (0) | 2022.02.07 |