form 태그와 속성 / URL,URI 에 대하여

1/ form 태그와 속성

#1. form 태그

#2. form의 속성 method

#3. form의 속성 action

2/ URL, URI에 대하여

 

1/ form 태그와 속성

 

#1. form 태그란? 

사용자가 입력한 데이터를 서버로 전송시켜 처리해주는 태그이다. 

어디로 / 어떤 방식으로 보내야하는지는 form의 속성들을 이용한다.

 

풀어 말하자면, 지금까지 html로 웹페이지를 만들면서 회원가입 창이나 문의게시판 등 input으로 사용자의 입력이 필요한 태그를 배웠었다. 이 때 input에 입력한 내용들이 어떻게 전달되어 어떤 식으로 처리되는지 궁금했는데, 그게 form 태그로 이뤄지는 거였다. 그래서 이 form태그로 body 내부의 사용자 입력 양식을 다 감싸는 형태로 코드를 작성해야한다.

디자인적인 작업보다는 데이터의 전송/처리의 작업이라고 보면 될 듯 하다.

 

form의 속성에는 우선 크게 2가지 정도만 알고 있자

 

#2. form의 속성 method

method는 폼을 서버에 전송할 방법을 정해주는 속성이다.

속성값에는 get 과 post가 있다.

브라우저에서 form의 입력된 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만, 매우 다른 방식이다. 

  

1- GET

-입력한 데이터를 URL 그대로 전달한다. 

form태그안의 아래와 같은 input 엘리먼트들을 기준으로 사용자가 id와 pw를 입력하면,

서버가 이걸 받아서 url로 내용을 queryString방식으로 전달함과 동시에

http://126.3.2.1:5500/view.html?id=leeyj&pw=1234 url로서 서버가 데이터를 action으로 지정해둔 장소로 쏴줍니다.

 

아래와 같이 URL이 데이터 자체 그대로 표현해준다. 

 

 

2- POST

- 안 보이는 곳에서 데이터, 내용을 전달하는 방식

- 전달하는 데이터형식은 GET과 같이 queryString 형태이다.

 

만약 get 대신 form method="post"를 넣으면, 아래와 같이 페이지가 작동하지 않는 걸 확인할 수 있다.

url은 정상적으로 get과 똑같이 찍히나 뒤쪽에 입력한 queryString의 데이터 형태는 존재하지 않는다.

devTool을 이용해서 payload부분을 보면 내가 게시물상에서 넣은 내용이 존재하긴 한다.

즉, 모든 브라우저는 get 요청만 렌더링해준다.

 

따라서, post는 데이터를 전달하는 용도지 화면에 랜더링하기 위한 용도는 아니다.

 

 

#3. form의 속성 action

폼을 전송할 서버쪽 스크립트 파일을 지정해준다.

전송을 위해 input 속성으로 submit 버튼을 넣었는데,

submit 버튼 자체에 직접적으로 link를 걸지 않고, form 태그 상의 action 속성에 걸려있는 link, 파일로 데이터를 보내서

처리하는 방식이다.

 

 

2/ URL, URI에 대하여

URL : Uniform Resource Locator

/ 웹의 주소, 컴퓨터 네크워크 상에서 리소스의 위치 알려주기 위한 규약, 규칙

 

URI : Uniform Resource Identifier

/ 특정 리소스를 식별하는 통합 자원 식별자

 

URI는 하나의 특정한 자원을 직접적으로 가리키는 문자열이라면,

URL은 웹상에서의 '자원의 위치, 주소' 로 간접적으로(?) 자원을 식별하는 개념이다. 

URI 가 더 포괄적인 개념이다. URI > URL 

 

우리집 고양이를 예로 들자면,

후추 그 자체가 URI 라면 강동구 천호동 1234번지 는 후추의 URL같은 개념,,

www.google.com/hoochu면 후추인건 알지만 후추는 못찾음 즉 URI이지만 URL은 아님

www.google.com/hoochu.cheonho1234  면 URI이기도 하고 URL이 되기도 함

 

HTTP

Hyper Text Transfer Protocol

웹상에서 정보를 주고 받을 수 있는 통신 규약/규칙

클라이언트-서버 사이에서 이루어지는 요청/응답 프로토콜

 

http를 통해 전달되는 자료는 url로서 조회가 가능, 위치를 찾아줘서 자료를 볼 수 있는 개념