1. Form 이란

사용자가 입력필드에 입력한 데이터 값을 서버로 전송해주는 태그 입니다.

기본 값은 빈 컨테이너 입니다.

1.1 서버와 클라이언트간의 전송 과정

1. FORM이 있는 웹 페이지 방문
2. 입력필드에 값을 입력하고 서버로 제출합니다
3. 서버는 전달받은 폼 데이터를 처리하기 위해서 웹 프로그램으로 전달 합니다
4. 웹 프로그램에서 폼 데이터를 처리합니다.
5. 처리 결과에 따른 HTML 문서 페이지를 웹 서버로 전송합니다.
6. 웹 서버는 받은 문서 페이지를 클라이언트에게 전달합니다.
7. 클라이언트가 웹 브라우저를 통해 전달받은 문서를 확인 합니다.

만약 사용자가 특정 사이트에서 로그인을 하기 위해 form 양식을 서버로 보낼 떄
ID 혹은 패스워드가 틀린 정보라면 서버는 웹 프로그램을 통해 잘못된 정보를 확인하고
사용자에게 잘못된 정보로 로그인 할 수 없다고 전달 할 것 입니다.

1.2 form 태그 속성

• action 폼을 전송할 서버 주소를 지정합니다.
• name 폼을 식별하기 위한 식별자
• accept-charset 폼을 전송할 때 사용할 문자 인코딩을 지정합니다.
• method 서버에 전송할 form 방식을 결정 합니다. GET 또는 POST

<h1> 회원가입 양식 </h1>
    <form action="./webserver.php" method="get">
    <!-- 현재 위치에서 webserver.php 파일에게 form 데이터를 전송 / 전송 방식은 GET -->
        <div id="id">
            ID : <input type="text" placeholder="ID를 입력하세요" name="ID"><br>
            PASSWORD : <input type="password" placeholder="PASSWORD를 입력하세요" name="PASSWD"><br>
            <input type="date" name="date of birth"><br>
            남성 : <input type="radio" value="male" name="sex"><br>
            여성 : <input type="radio" value="female" name="sex"><br><br>
            <input type="submit" value="회원 가입" name="submit">
            <input type="reset">
        </div>
    </form>

<form> 태그에 포함된 모든 입력요소 값들은, 사용자가 회원 가입 이라는 버튼을 누르게
되면 웹 서버인 ./webserver.php 파일에 전송 됩니다.

1.3 전송 방식 ( GET or POST )

GET

1. 서버에 요청을 보내어서 정보를 가져올 때 사용합니다.
2. 서버에서 기상청 정보를 가져오거나, 이미지를 받아올 떄 사용 합니다.
3. 데이터를 읽을때만 사용하고 수정할 때는 사용하지 않습니다.
   → 데이터의 변형이 없으므로, 사용하기 안전하다.
4. 서버에 데이터를 전송할 때 form 데이터를 URL 뒤에 붙여서 서버에게 전송합니다
   → 보안이 취약함

위와 같이 서버로 전송될 떄 주소 값 뒤에 form태그의 데이터를 붙여서 전송
URL뒤에 붙여서 전송되는 name address를 매개변수라하며, 이러한 전송 방식을
쿼리스트링이라고 부릅니다.

GET을 사용할 때 참고할 사항

1. 불필요한 요청을 제한하기 위해서 요청이 캐시될 수 있습니다.
2. 매개변수의 내용이 노출되기 때문에 보안이 필요한 데이터를 전송할 때는 사용하지 않습니다.
3. 브라우저에 기록이 남습니다.
4. 데이터 길이에 제한이 있습니다
5. GET 요청이 성공 시, 200(OK) HTTP 응답코드를 XML JSON 및 html txt등
   여러 데이터와 함께 반환 합니다.
6. GET 요청은 Idempotent 합니다.

POST

1. 서버에 요청을 보내서 서버가 작업을 수행하게 합니다.
2. 서버에 있는 데이터를 추가, 수정, 삭제한 후에 응답을 받아 냅니다.
3. 데이터를 보내는 목적은 자원을 업데이트 하기 위해서 입니다.
4. GET과는 다르게 서버에 데이터를 전송할 때 HTTP의 BODY에 담아서 전송합니다
   → URL에 매개변수가 보이지 않아서 GET 방식 보다는 보안이 우수하다.
   → POST 요청도 크롬의 개발자도구나 , Fiddle와 같은 툴로 요청 내용을 확인할 수
   있기 때문에, 민감한 내용은 암호화해서 전송해야 합니다.
   

서버로 데이터를 전송할 때, URL 뒤에 매개변수가 붙지 않습니다.

POST를 사용할 때 참고 사항

1. 요청이 캐시되지 않습니다
2. 브라우저 기록에 남지 않습니다
3. 데이터 길이에 대한 제한이 없습니다
   → HTTP의 BODY를 이용해서 보내기 때문에, 길이의 제한없이 대용량 데이터 전송 가능
4. HTTP 요청 중 자원 생성은 201(Created) HTTP 응답 코드를 반환합니다
5. POST 요청은 Idempotent 하지 않습니다.

1.4 GET POST 의 차이점 요약

	GET	POST
캐시	O	X
브라우저 기록	O	X
북마크추가	O	X
데이터 길이 제한	O	X
HTTP 응답코드	200(ok)	201(Created)
리소스 전달 방식	쿼리스트링	HTTP Body
Idempotent	O	X

Idempotent 란?

연산을 여러 번 적용해도 결과가 달라지지 않는 성질

GET을 예제로 들자면

• 서버에게 동일한 요청의 GET을 보내더라도 동일한 응답이 돌아와야 합니다.
• GET은 설계 원칙에 의해서 데이터를 변경하지 않으며, 주로 조회할 때 사용합니다
  여기서 조회란, 웹 페이지 열어보거나 게시글을 읽는 행위

POST를 예제로 들자면

• 서버에게 동일한 요청의 POST를 여러 번 보내더라도 응답은 항상 다를 수 있습니다.
• POST는 서버의 자원을 업데이트 할 수 있도록 설계되었기 때문입니다.
• 게시글을 작성하거나 수정 또는 삭제할 때 마다 서버의 데이터가 변동되기 때문에
  Idempotent 하지 않습니다