웹 개발에서 가장 일반적인 작업 중 하나는 사용자 입력을 받고 그 데이터를 수집하는 것입니다. 이 때 Document Object Model (DOM)을 사용하여 웹 페이지에서 폼을 조작할 수 있습니다.

폼 요소 선택하기

우선, JavaScript를 사용하여 DOM을 통해 폼 요소를 선택할 수 있습니다. 다음은 getElementById 메서드를 사용하여 폼 요소를 선택하는 방법입니다.

<form id="myForm">
  <input type="text" id="username">
  <input type="password" id="password">
  <button type="submit">Submit</button>
</form>

const form = document.getElementById('myForm');
const username = document.getElementById('username');
const password = document.getElementById('password');

이벤트 처리하기

다음으로, 사용자가 폼을 제출할 때 이벤트를 처리하는 방법을 확인할 수 있습니다.

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 기본 제출 동작을 막음
  // 입력 데이터 가져오기
  const usernameValue = username.value;
  const passwordValue = password.value;
  // 입력 데이터 유효성 검사 및 처리
});

입력 데이터 유효성 검사

마지막으로, 사용자 입력 데이터의 유효성을 검사하고 처리하는 방법을 살펴볼 수 있습니다. 예를 들어, 사용자 이름과 비밀번호가 비어 있는지 확인할 수 있습니다.

if (usernameValue.trim() === '' || passwordValue === '') {
  alert('사용자 이름과 비밀번호를 입력해주세요.');
  return;
}

// 유효한 경우 처리

이제 JavaScript를 사용하여 DOM을 통해 폼을 선택하고 제출 이벤트를 처리하며, 입력 데이터의 유효성을 검사할 수 있습니다.

이는 웹 어플리케이션에서 중요한 역할을 하는 기본적인 폼 조작에 대한 간단한 예제입니다.

참고 자료:

• MDN Web Docs - Working with forms