웹 애플리케이션에서 사용자 입력 폼을 다룰 때, 경우에 따라 입력 요소를 동적으로 숨기거나 표시할 필요가 있습니다. JavaScript를 사용하여 입력 요소를 토글(toggle)하는 방법을 알아보겠습니다.

1. HTML

먼저, 다음과 같이 HTML에 입력 요소를 추가합니다.

<input type="text" id="username" />
<button id="toggleButton">Toggle</button>

2. JavaScript

다음으로, JavaScript를 사용하여 입력 요소를 숨기고 표시하는 기능을 구현합니다.

const toggleButton = document.getElementById('toggleButton');
const usernameInput = document.getElementById('username');

toggleButton.addEventListener('click', () => {
  if (usernameInput.style.display === 'none') {
    usernameInput.style.display = 'block';
  } else {
    usernameInput.style.display = 'none';
  }
});

위의 코드에서는 “Toggle” 버튼을 클릭할 때마다 username 입력 요소의 표시 상태를 전환합니다.

3. 결과

위의 코드를 HTML 파일에 추가하고 브라우저에서 실행하면 “Toggle” 버튼을 클릭함으로써 입력 요소를 숨기거나 표시할 수 있습니다.

이렇게 함으로써 JavaScript를 사용하여 입력 폼의 입력 요소를 동적으로 숨기고 표시하는 방법을 살펴보았습니다.