[javascript] 입력 폼에서 값을 가져오는 방법

11 Dec 2023

javascript

웹 개발에서 사용자로부터 입력을 받아야 하는 경우가 많습니다. 이때 입력 폼을 통해 값을 가져와야 합니다. 이 포스트에서는 JavaScript를 사용하여 입력 폼에서 값을 가져오는 방법을 알아봅니다.

HTML 입력 폼 만들기

먼저 아래와 같이 HTML에서 입력 폼을 만듭니다.

<form>
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="button" value="제출" onclick="getInputValues()">
</form>

위 코드에서 id 속성은 JavaScript에서 해당 요소를 찾을 때 사용할 수 있는 고유한 식별자입니다.

JavaScript로 값 가져오기

이제 JavaScript를 사용하여 입력된 값을 가져오는 함수를 만듭니다.

function getInputValues() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  console.log("사용자 이름: " + username);
  console.log("비밀번호: " + password);
}

위 코드에서 document.getElementById를 사용하여 입력 폼 요소의 값을 가져올 수 있습니다. 이제 onclick 이벤트로 함수를 호출하여 값을 가져올 수 있습니다.

이제 입력 폼에서 값을 가져오는 방법에 대해 알게 되었습니다. 위의 예제는 간단한 형태이며, 실제 프로젝트에서는 입력값을 유효성 검사하고 보안을 강화해야 합니다.

HTML 입력 폼 만들기

JavaScript로 값 가져오기

참고 자료