3.5.1 폼 이해하기

프런트엔드에서 폼 관련 요소는 사용자에게 값을 입력받아 서버로 전송하기 위해 사용합니다. 서버로 전송된 값을 처리하는 것은 백엔드지만, 서버로 전송하는 것은 프런트엔드에서 처리해야 합니다. 프런트엔드에서 입력된 값을 서버로 전송하는 방법은 크게 2가지입니다.

첫째, <form> 태그에서 입력받은 값을 <form> 태그의 action 속성에 지정된 경로로 전송해 처리하는 방법입니다. 이 방법은 사용자가 값을 입력한 페이지에서 다른 페이지로 이탈해 버린다는 단점이 있습니다. 그래서 원래 페이지로 돌아가려면 다시 페이지를 이동해야 합니다. 단점이 있지만, 입력 값을 전송하는 가장 간단한 방법입니다.

form_ex_1.html

<form action="/login_process.php">
  <label for="uid">아이디: <input type="text" id="uid" /> </label>
  <label for="upw">비밀번호: <input type="text" id="upw" /> </label>
  <button type="submit">로그인</button>
</form>

둘째, 입력 값을 자바스크립트로 가져와서 AJAX(Asynchronous JavaScript And XML)를 사용해 전송하는 방법입니다.