form이 뭐예요?

사용자의 정보를 얻을 수 있는 html의 태그입니다. 회원가입이나 어떠한 설문 조사를 할 때 많이 쓰이고요.

form은 어떻게 만드는데요?

html로 만들고, method와 action으로 서버와 통신합니다.

<form action="" method="post" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

MDN에서 긁어 온 form입니다.

정보 수집을 위해 form은 사용자가 응답할 수 있는 대화형 박스를 생성하고, 그곳에 적혀진 사용자의 답변은 method(get/post)를 통해 서버와 연결하게 되며, action으로 데이터를 처리합니다.

저렇게만 만들면 되는데 굳이 포스팅을 한 이유가 있나요?

method와 action 때문입니다. 사실 form을 만드는 건 굉장히 간단하고, css와 결합하면 하루에도 10개가 넘는 폼을 만들 수 있습니다. 하지만 서버와 연결하고, 이 데이터의 옳고 그름을 아는 건 조금 더 깊게 알아야 될 필요가 있습니다. 그에 대한 공부를 이곳에 정리하려고 포스팅을 했습니다.

action

html5에서는 action에 대한 경로를 굳이 지정해 주지 않아도 사용하는 데에 문제가 없게 되었습니다.

form 양식 제출 후, 그 데이터가 전송될 위치를 지정하는 데에 사용이 됩니다. action으로 데이터를 받은 URL은 그 값을 저장하거나, 계산된 결과를 보여 주는 데에 사용이 됩니다.

get/post

데이터를 보내는 방법에 대한 메서드입니다. get은 공개적으로, post는 비공개적으로 데이터를 전송합니다.

get method
1. URL에 정보가 담긴 상태로 표시가 됩니다.
2. 전송할 수 있는 정보의 길이가 제한되어 있습니다. (250자 내외)
3. url?search=겟이+뭔가요&another=두개는+엔을씁니다 (검색할 때 주로 get을 쓰기 때문에 검색처럼 했습니다)
ㄴ ? 뒤엔 URL, 앞엔 파라미터가 붙고, form name=사용자 답변으로 붙습니다. 두 개 이상의 값을 받았을 땐 &으로 구분합니다.

post method
1. URL이 아닌 패킷의 본문에 데이터를 넣어서 전송하는 방식. (head의 body에 값이 입력되어 전송이 됩니다.)
2. 전송할 수 있는 정보의 크기에 제한이 없고, 노출이 되지 않기 때문에 로그인, 가입 등 get보다 정보 보안을 필요로 하는 곳에 사용이 됩니다.

get이나 post로 전송한 데이터를 action에 지정한 URL이 받아서 처리를 해 줍니다!