HTML <input type=”password”> – 올바른 이해와 사용 방법

`<input type="password">`

<input> 태그의 type="password"는 한 줄 비밀번호 입력 필드를 나타냅니다.

브라우저는 입력되는 민감한 정보를 화면에서 보이지 않게 텍스트 문자를 점("•")과 같은 기호로 대체하여 읽을 수 없게 처리합니다.

이 필드는 입력된 텍스트 문자를 시각적으로 숨기지만, 보안을 위해 암호화하지는 않습니다.
즉, 사용자 근처에 있는 사람들이 입력된 텍스트 문자를 읽지 못하도록 가리는 역할만할 뿐 일반 텍스트 필드(type="text")와 동일하게 작동합니다.

관련 속성 사용하기

<input type="password">의 관련된 속성에 대해 알아보겠습니다.

`placeholder` 속성

placeholder 속성은 값이 설정되지 않은 경우 텍스트 입력 컨트롤에 표시되는 텍스트를 지정합니다. 이것을 '플레이스홀더 텍스트'라고 합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

플레이스홀더 텍스트의 스타일은 CSS placeholder 텍스트에 스타일 적용하기를 참조하세요.

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.

컨트롤의 레이블(이름표)은 <label> 요소를 사용해야 합니다.
<label>의 텍스트는 시각적으로나 프그램적으로 해당 컨트롤과 연결됩니다. 시각장애인을 위한 스크린 리더는 기본적으로 placeholder 속성의 텍스트를 읽지 않지만, <label>의 텍스트는 읽어줍니다.

또한, <label> 요소는 포인팅 장치 사용자의 사용자 경험을 개선합니다. 사용자가 <label>을 클릭, 터치 또는 탭하면 포커스가 레이블의 연결된 해당 컨트롤로 이동합니다.

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다.

<input type="password" placeholder="사용자 비밀번호">

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

`value` 속성

비밀번호 입력 필드에 입력된 문자열의 초깃값을 지정합니다.

`readonly` 속성

컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

비밀번호 가시성 토글(보기/숨기기)

사용자가 입력한 비밀번호를 확인할 수 있도록 비밀번호 가시성 토글(보기/숨기기) 버튼을 제공하는 것이 좋습니다. 다음의 예제처럼 이 버튼은 자바스크립트를 사용하여 기능을 제공합니다.

HTML

<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password" value="12345" readonly>
<button type="button" id="toggle-password" onclick="togglePassword()">비밀번호 보기</button>

<script>
    function togglePassword() {
        const x = document.getElementById("user-password");
        const toggleButton = document.getElementById("toggle-password");
        
        if (x.type === "password") {
            x.type = "text";
            toggleButton.textContent = "비밀번호 보기";
        } else {
            x.type = "password";
            toggleButton.textContent = "비밀번호 숨기기";
        }
    }
</script>