입력 폼에서 특정 요소의 값 비교는 자바스크립트를 사용하여 간단히 처리할 수 있습니다. 주로 비밀번호 확인이나 유효성 검사 등에 활용됩니다.

HTML 입력 폼 생성

우선, 비교할 값들을 입력하는 HTML 폼을 생성합니다. 예를 들어, 비밀번호와 비밀번호 확인을 받는 폼을 생성합니다.

<form>
  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password">
  <br>
  <label for="confirmPassword">비밀번호 확인:</label>
  <input type="password" id="confirmPassword" name="confirmPassword">
  <br>
  <input type="submit" value="제출">
</form>

자바스크립트를 사용한 값 비교

다음으로, 자바스크립트를 사용하여 입력된 값들을 비교합니다. 아래 예제는 간단한 형태의 값 비교를 보여줍니다.

document.querySelector('form').addEventListener('submit', function(event) {
  var password = document.getElementById('password').value;
  var confirmPassword = document.getElementById('confirmPassword').value;

  if (password !== confirmPassword) {
    alert("비밀번호가 일치하지 않습니다!");
    event.preventDefault();
  } else {
    // 제출 또는 다른 작업을 수행
  }
});

위의 코드는 입력 폼에서 제출이 발생할 때, 입력된 비밀번호와 비밀번호 확인 값이 일치하지 않으면 경고를 표시하고 이벤트를 취소합니다.

이제 우리는 입력된 값들을 자바스크립트로 쉽게 비교할 수 있습니다.

참고 자료:

• MDN 웹 문서: 폼 이벤트