[html] form 태그에 대해 알아보자 / POST와 GET 차이

<form>태그는 웹 페이지에서의입력 양식을 말한다. 로그인 창이나, 회원가입 폼 등이 바로 <form> 태그를 사용하고 있습니다.
이 <form> 태그는 입력된 데이터를 한 번에 서버로 전송합니다. 백엔드를 공부하시는 분들도 이 <form> 태그에 대해서는 자세히 알아두는 것이 좋습니다.

폼 태그의 기본적인 구성은 다음과 같습니다.

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

여기서 <form>을 구성하는 요소들을 하나씩 살펴보도록 하겠습니다.

• action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
• name : 폼을 식별하기 위한 이름
• method : 서버에 전송할 http 메소드 (GET 또는 POST)
• input의 type : 입력받을 요소의 종류를 정한다. number, text, password 등. 반드시 맞는 것으로 입력해 둘 것!
• label : 폼 위젯과 라벨을 연결하는데 사용된는 것으로 보통 <input>의 이름을 작성함. 클릭 시 해당 input 박스가 활성화되며 접근성적 측면에서도 사용해 주는 게 좋음.

GET과 POST의 차이

GET 방식은 URL 끝에 데이터를 붙여 보내며 데이터가 외부에 노출되어 보안에 취약합니다. GET 방식은 지정된 리소스에서 데이터를 요청하는 경우에만 사용합니다. (읽어올 때)

반면 POST 방식은 지정된 리소스에서 데이터를 처리할 수 있습니다. (추가/수정/삭제 등) 데이터가 외부에 노출되지 않기 때문에 보안상의 이유가 있다면 POST 방식을 사용하는 것이 적절하겠습니다.

 

다음번에는 form input 속성의 다양한 입력 타입을 설명해 보도록 하겠습니다.