비밀번호 입력을 '토글 버튼'으로 보이기/숨기기 기능 추가하기

웹에서 회원가입이나 로그인 폼을 만들 때

가장 기본으로 등장하는 요소가 바로 <input> 태그이다.

 

그중에서도 자주 사용하는 것이 type="text"와

type="password"이다.

 

두 속성은 매우 단순하지만 의외로 큰 차이를 가진다.

 

1. input type="text"

text는 사용자가 입력한 내용을 그대로 화면에 노출한다.
아이디 입력창, 이름, 제목, 검색창 등의 일반적인 텍스트 입력에 사용된다.

<input type="text" placeholder="아이디 입력">

특징

• 입력한 글자가 그대로 보인다
• 기본적인 텍스트 입력 용도
• 별도의 보안 기능 없음

2. input type="password"

password는 비밀번호 입력창에서 사용하는 타입이다.
입력한 값이 ●(도트) 형태로 가려진다.

<input type="password" placeholder="비밀번호 입력">

특징

• 입력 문자를 자동으로 숨긴다
• 실제로 숨겨지는 것은 화면 표시만 가릴 뿐, 네트워크 전송 시에는 동일한 문자열이다
• 브라우저가 비밀번호 저장 기능을 제공할 수 있다

▼ 실제 화면 노출 이미지

text와 password 타입의 차이가 보여진다

 

인풋 타입의 텍스트는 위와 같이 입력값이 노출되고

인풋 타입 패스워드의 경우 도트 형태로 가려지고 있다.

---

3. 비밀번호 보기/숨기기 토글 구현

요즘 거의 필수로 들어가는 기능이

바로 비밀번호 표시/숨기기 버튼이다.

아래와 같이 간단하게 구현할 수 있다.

 

▼ 구현 코드

<input type="password" id="pw" placeholder="비밀번호 입력">
<button type="button" id="toggleBtn">👁️</button>

<script>
    document.getElementById("toggleBtn").addEventListener("click", function(){
        const pw = document.getElementById("pw");

        // 현재 상태가 password면 보이도록 변경
        if (pw.type === "password") {
            pw.type = "text";       // 비밀번호 표시
            this.textContent = "🙈"; // 아이콘 변경
        } else {
            pw.type = "password";   // 다시 숨기기
            this.textContent = "👁️"; // 아이콘 변경
        }
    });
</script>

동작 방식

• 버튼을 누르면 input 의 type을 password ⇄ text 로 변경한다
• 버튼 텍스트도 함께 바뀌도록 설정했다

타입	특징	적절한 사용 환경
text	입력값이 그대로 노출됨	아이디, 이름, 제목 등
password	입력값이 ● 형태로 숨겨짐	비밀번호 입력

 

비밀번호에 보기/숨기기 토글 버튼까지

구현하면 UX가 한층 좋아지므로

사용자 경험 개선을 위해 알아두도록 하자!