Coding/TIL & 배운것들

HTTP Form

코딩짜는 머글 2024. 12. 19. 15:58

HTML Form 요소

웹에서 유저에게 데이터를 입력받는 여러가지 형식(버튼, 텍스트, 드랍다운, 선택 등)을 제공한다. 유저의 데이터를 서버로 전송하는 역할을 한다. 

 

action 
데이터가 전송될 URL을 지정한다. 지정하지 않을경우 현재 페이지의 URL로 데이터를 전송한다.
method
데이터를 전송하는 방식(HTTP request method)을 지정한다. HTML Form은 GET방식 또는 POST 방식으로만 전송이 가능하다.

 

 

<form action="#" method="#">

		<label for="message">메세지 입력</label>
		<input type="text" id="message" name="message">
		<button type="submit">전송</button>

</form>

 

label for 와 input id 는 일치하는게 좋다. 기능동작과는 관계가 없지만 동일하게 하면 label과 input을 묶어줄 수 있다. 그렇게되면 label을 클릭해도 input이 선택되도록 할 수 있다. 그리고 button type을 꼭 submit으로 해야 버튼이 전송하는 기능을 할 수 있다. 

 

 

input

form에서 사용자의 입력을 받기위해서 사용된다. type 속성에 따라 입력 동작 방식이 달라지게 된다. 지정하지 않을 경우 디폴트는 type=text로 인식한다. 데이터 전송에 있어서 핵심 속성은 name! name으로 서버에 데이터를 전달하고, 서버는 name 을 보고 데이터를 판단한다. 

 

 

name 속성

form을 제출하면 name 속성에 설정된 값이 서버로 전송된다. 서버에서는 name 속성을 사용하여 값에 접근하기때문에 name 속성이 없으면 서버가 데이터를 받을 수 없게된다.  name의 속성 값이 key가 되고, 사용자가 입력한 값이 value가 되어 전송된다. 

 

HTTP methods 

 

HTTP란? 

통칭 하이퍼텍스트 전송 프로토콜(Hyper Text Transfer Protocol) 여러가지 리소스를 보내고 받을 때 사용하는 프로토콜(통신규약)==약속이다(많은 약속들 중 하나가 HTTP이다). 요청과 응답ㅇ으로 이루어지는 통신으로 웹에서 이루어지는 데이터 교환의 기초라고 할 수 있다.

 

 

HTTP Methods

HTTP에서 수행할 작업을 나타낸다. 특정 자원에 대해 내가 수행하고자 하는 동작을 method로 정의한다. GET, POST, PUT, DELETE...등이 있다.

 

 

 

GET

  • 특정한 자원을 조회하는데 사용한다. 
  • 데이터를 서버로 전송할 때 쿼리스트링(Query String Parameters)를 사용해서 전송한다. (URL에 데이터가 포함되어 전송된다.)
  • 해당 쿼리스트링은 클라이언트에게 전달하는 데이터 정보가 무방비 상태로 노출되므로, 이를 유의해야 한다.(브라우저 히스토리에도 기록이 남는다.)
쿼리스트링(Query String Parameter)이란?
데이터를 URL 주소에 포함시켜 전송하는 방식이다. '?' 뒤에 데이터가 위치하게된다. '&' 로 연결된 key=value 형태로 구성된다.
-> https://www.testsite.com/path1/path2?key=value&key2=value2

 

 

POST

  • 주로 새로운 리소스를 생성(Create)하는데 사용한다.
  • 성공적으로 완료하면 201 HTTP 응답을 반환한다.
  • 데이터를 메세지 바디에 쿼리 파라미터 형식(key - value)으로 전달한다. GET 방식과 비교하면, 데이터가 외부로 노출되지 않으므로 보안상의 이점이 있다.
  • 데이터를 전송할 때, Body에 담아 전송하므로, 메세지 길이의 제한이 없다. 

 

PUT

  • 리소스가 있다면 요청을 보낸 데이터로 완전히 덮어씌우고, 리소스가 없다면 새로 생성한다.
  • POST와의 차이점은 클라이언트가 리소스의 위치를 알고 URI를 지정한다는 점이다.
  • 부분 수정이 불가능하다.

 

DELETE 

  • 리소스를 제거하는 역할이다.