HTML에서 데이터 전송

http://1220·2023년 1월 1일
0
<form name="f" method="get or post" action="url">
  <label for="name">이름:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">이메일:</label><br>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit" value="제출">
</form> 

사용자의 데이터를 전송 해봅시다.

우리가 흔히 사용하는 검색, 로그인 등 웹어플리케이션에서 서버와 상호작용하는 많은 태그 중 하나입니다.

폼은 사용자의 입력을 수집하는데 사용되며, 텍스트 필드 값과 드롭다운 목록에서의 선택을 수집할 수 있습니다.

위의 코드는 간단한 HTML 폼의 예입니다:

이 폼은 사용자가 이름과 이메일을 입력할 수 있는 두 개의 텍스트 필드와 폼을 제출하는 제출 버튼으로 구성되어 있습니다. 사용자가 제출 버튼을 클릭하면 폼 데이터가 서버로 전송되어 처리됩니다.

이 때 주의할 점은

무조건 form 안에서 작동을 시켜야 합니다.
※ submit에는 절대 onclick 속성을 사용하지 않습니다.

method : 전송방식 속성 (get,post) 두가지 방식
action : 이동할 url 입니다.

get 전송시 : URI에 해당 정보가 출력되면서 전송합니다.
출력 결과 :
이동할 url의 뒤에
?name1=value1&name2=value2...

post 전송시 : 암호화된 데이터를 이용하여 해당 URL로 전송

URL? URI?

출처 : https://danielmiessler.com/study/difference-between-uri-url/

Uniform Resource Identifier(URI)는 인터넷에서 이름이나 자원을 식별하는 문자열입니다. URI는 URL과 URN 두 가지 유형으로 나뉩니다.

URL(Uniform Resource Locator)은 인터넷상의 자원의 위치를 지정하는 URI의 유형입니다. URL은 여러 가지 요소로 구성되는데, 이는 프로토콜(HTTP나 HTTPS같은)과 도메인 이름, 자원의 경로가 포함됩니다.

URN(Uniform Resource Name)은 위치가 아닌 이름으로 리소스를 식별하는 URI의 한 유형입니다. URN은 리소스에 대한 영구적인 위치 독립 식별자를 제공하는 데 사용됩니다.

GET & POST ?

이 두가지 데이터 전송 타입에 대해 알기 전에 HTTP 통신에 대해 간단하게 알아봅시다.

HTTP(HyperText Transfer Protocol)는 인터넷에서 하이퍼텍스트 문서를 전송하기 위한 프로토콜입니다. 웹 상에서의 데이터 통신의 기반이며 웹 서버에서 클라이언트의 웹 브라우저로 데이터를 전송하는 기반이 됩니다.

HTTP는 클라이언트(예: 웹 브라우저)에서 서버로 요청을 보내고 서버에서 응답을 수신함으로써 작동합니다. 요청 및 응답 메시지를 HTTP 메시지라고 합니다.

HTTP 메시지는 시작 줄, 머리글 및 메시지 본문으로 구성됩니다. 시작 줄은 요청 유형(예: GET, POST)과 요청할 리소스(예: 웹 페이지 또는 이미지)를 지정합니다. 헤더에는 내용 유형 및 길이와 같은 요청 또는 응답에 대한 추가 정보가 들어 있습니다. 메시지 본문에는 웹 페이지의 내용과 같은 전송되는 실제 데이터가 포함됩니다.

GET 방식
데이터를 쿼리스트링을 통해 전송합니다.

URI에 그대로 노출되기 때문에 보안이 필요한 데이터라면 사용해서는 안됩니다.

POST 방식
URI에 그대로 노출되지는 않지만 완벽한 암호화가 되지는 않기 때문에 민감한 정보라면 암호화해 전송해야합니다.

profile
프로그래밍을 배우고 있습니다.

0개의 댓글