form GET & POST

 

 

form 2가지 중요 속성(attribute)

1. action

2. method

 

action

어떤 페이지로 data를 보낼 건지 지정할 수 있다. 

 

현재 프로젝트의 경우 정적페이지므로, data를 내가 새로 만들 파일로 보낼 것이다. 

<form action="friends.html" >

 

 

method는 2가지 방식 중 하나를 쓸 수 있다. 

하나는 POST 이고, 다른 하나는 GET이다.

 

* POST는 백엔드 서버에 정보를 전송하는 방식이다. 

  우리는 지금 서버를 갖지 않은채로, 현재 프로젝트의 경우 정적 페이지이므로, POST 방식은 쓸 수 없다.

 

우리는 GET 방식을 사용할 예정이다.

URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 것이다. 

** GET 방식은 보안에 취약하다.

    username과 password는 GET 방식으로 보내선 안된다. 왜냐면 url에 보낸 정보가 포함되기 때문.

 

이렇게 url에 쿼리문으로 등장하는 것이 get 방식이다.

url에 나온 쿼리문의 값을 바꿔주면 다음 화면이 나온다 (get방식 = url에 나와도 상관없는 정보)

 

 

현재는 서버가 없으니 코드에 get방식을 사용한다.

만약 data를 서버로 보내고 싶다면 POST 방식을 쓸 수 있다. 

 

현재 프로젝트에선 get 메소드로 페이지가 바뀌는 것에만 초점을 둔다. 

아래의 코드에서 밑줄 친 부분이다.

  <form action="friends.html" method="get" id="login-form">

    <input type="text" placeholder="Email or Phone nuber" />

    <input type="password" placeholder="Password" />

    <input type="submit" value="Log In" />

    <a href="#">Find Kokoa Account or Password</a>

  </form>

 

 

강의록 총정리 

 

- #login-form ~(id 형식) 으로 썼지만,

.login-form~ (class 형식) 으로 써도 된다. 더 편한 방식을 택하라. (선생님은 BEM 규칙에 따른 CLASS형식인 후자를 선택)

 

- CSS 파일에서 주석 처리는 /* */

 

- styles.css 에서 font-family와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다. 

(ex. 모든 스크린의 backgroun-color) 이는 하나의 방식!

 

- form 은 중요한 2가지 속성(attribute)를 가지고 있다.

하나는 action, 다른 하나는 method이다. 

 

- action은 어떤 페이지로 data를 보낼 건지 지정할 수 있다.

- action에 적어 놓은 URL에 해당하는 파일이 반드시 존재해야한다.

 

- method는 2가지 방식 중 하나를 쓸 수 있다. 

하나는 POST, 다른 하나는 GET 이다. 

- POST는 백엔드 서버에 정보를 전송하는 방식. (따라서 이번 강의에선 사용불가)

- GET은 보안에 취약하다. username, password를 GET 방식으로 보내선 안된다.

URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 것이다.