12.5.3 폼 요소의 입력값 다루기

폼 요소는 사용자에게 값을 입력받아 이를 서버에 전달합니다. 전달받은 값을 서버에서 어떻게 활용하는지는 백엔드(backend) 영역이라서 이해하지 않아도 되지만, 서버에 전달하기까지 폼 요소에 입력된 값이 유효한지는 검증할 수 있어야 합니다.

사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다. 두 태그에서 어떻게 입력값을 다루는지 살펴보겠습니다.

● 한 줄 입력 요소 다루기

한 줄 입력 요소는 input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼 요소를 말합니다. 한 줄 입력 요소들은 값을 가져오거나 설정하는 방법이 모두 똑같습니다. 그래서 여기서는 한 줄 입력 요소 중에서 가장 대중적인 text와 password 요소로 예제 코드를 작성하겠습니다.

<form name="frm">
  <input type="text" name="id">
  <input type="password" name="pw">
</form>

text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에서 value 속성을 사용하면 됩니다.

document.frm.id.value;
document.frm.pw.value;