[HTML] 2. <form> 태그 GET 방식 & POST 방식
Server <-> Client
form 태그를 이해하기 위해서는 우선 server와 client라는 개념을 알아야 한다.
- server 는 정보를 제공하는 쪽,
- client 는 정보를 요청해 server로 부터 정보 제공받는 쪽 이다.
예를 들어 웹브라우저의 주소창에 google 홈페이지 도메인 주소인 https://www.google.com/ 을 입력하면 웹 브라우저는 이에 해당하는 서버에 컨텐츠를 요청한다. 그러면 해당 서버는 요청에 따른 컨텐츠를 웹 브라우저에 제공해 준다.
이 맥락을 다시 살펴보면 client는 웹브라우저를 통해 웹 서버에 원하는 정보를 요청하고, server는 요청에 따른 컨텐츠를 제공해 준다.

<form>
<form> 태그란?
form이란 사용자의 데이터를 서버에 전송하는 방법 이다.
일반적으로 회원가입, 로그인, 게시글 작성 처럼 정보를 서버로 보내야 할 때 사용한다.
<form> 태그 문법
<form action="서버주소" method="메소드형식">
보낼 정보
</form>
form 태그를 이용해 서버에 정보를 보낼 때에는 위와같이 <form>태그로 정보를 보낼 부분을 감싸 주어야 한다.
action 속성은 정보를 보낼 서버주소를 기입하는 속성이고,
method 속성은 데이터를 전송하는 방법 을 기입하는 곳으로 get방식, post방식 2가지가 있다.
GET방식 VS POST방식
GET 방식
GET방식은 client가 server에 있는 정보를 요청해서 가져오기 위해 설계되었다.
URL에 쿼리 스트링을 추가하여 데이터를 전송하는 방식이다.
240byte까지 전달할 수 있으며 QUERY.STRING 환경변수를 통해 전달된다.
URL노출로 보안성이 요구되는 경우에는 사용하면 안되며 검색엔진에서 검색단어 전송에 많이 이용한다.
** QUERY STRING : 입력한 데이터를 서버로 전달하는 방식으로 '?'로 시작한다. 데이터는 '이름=값'의 형식을 취하며 여러 데이터들이 있을 경우 '&'로 구분한다.

POST 방식
POST 방식은 server로 정보를 올리기 위해 설계되었다.
html header에 포함되어 전송되며 데이터크기의 제한은 없다.
URL에 파라미터가 표시되지 않는다.
<form> 태그 안의 <input> 태그들...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/testw/product" method="post">
<fieldset>
<legend>납품자정보</legend>
<ol>
<li><label for="name">납품자명: </label> <input id="name" type="text" name="name" required="required" placeholder="name" autocomplete="name"></li>
<li><label for="email">email: </label> <input id="email" type="text" name="email" required="required" placeholder="answs@naver.com" autocomplete="email"></li>
<li><label for="homepage">홈페이지: </label> <input id="homepage" type="text" name="homepage" required="required" placeholder="http://" autocomplete="homepage"></li>
</ol>
</fieldset>
<fieldset>
<legend>납품정보</legend>
<ul>
<li><label for="parcelname">상품명: </label> <input id="parcelname" type="text" name="parcelname" required="required" autocomplete="parcelname"></li>
<li>
<label for="parcelcount">납품수량: </label>
<input id="parcelcount" type="text" list="list" name="parcelcount" required="required" placeholder="최소10" autocomplete="name">
<datalist id="list">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</datalist>
</li>
<li><label for="parcelgrade">납품등급: </label> <input id="parcelgrade" type="range" name="parcelgrade" min="1" max="10" step="1" value="6"></li>
<li><label for="etc">기타사항: </label><textarea id="etc" name="etc" rows="5" cols="30"></textarea></li>
</ul>
</fieldset>
<input type="submit" value="send message">
</form>
</body>
</html>
