Form의 속성

Form

form은 아주 중요한 2가지 속성을 가지고 있다. 하나는 action이고 다른 하나는 method이다.

 

-action

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

    <form action="friends.html" id="login-form">
      <input type="text" placeholder="Email or phone number" />
      <input type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
      <a href="#">Find Kokoa Accountor or Password</a>
    </form>

 

그리고 friends.html을 만들고 hello만 입력했다.

 

-method

method는 2가지 방식을 사용할 수 있는데, POST와 GET이다.

POST는 백엔드 서버에 정보를 전송하는 방식인데 우리는 서버를 가지고 있지 않아서 여기선 사용하지 않는다.

GET 방식은 보안에 취약하다. 그렇기에 URL에 포함되어도 상관없는 정보들을 GET 방식으로 보낸다. username과 password를 GET 방식으로 내보낼 것이다.

 

    <form action="friends.html" method="get" id="login-form">
      <input type="text" placeholder="Email or phone number" />
      <input type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
      <a href="#">Find Kokoa Accountor or Password</a>
    </form>

 

-데이터 보내기

    <!-- login -->
    <form action="friends.html" method="get" id="login-form">
      <input name="username" type="text" placeholder="Email or phone number" />
      <input name="password" type="password" placeholder="Password" />
      <input type="submit" value="Log In" />
      <a href="#">Find Kokoa Accountor or Password</a>
    </form>

input에 name="username", name="password"를 추가해준다.

 

그리고 만든 화면으로 가서 id, password를 입력하고 로그인한다.

 

로그인하면 friends.html로 넘어가게 된다. 그리고 URL을 보면 id, password가 같이 나온다.

post도 서버만 구축되어 있다면 똑같이 하면된다.