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

`<input type="password">`

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

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

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

관련 속성 사용하기

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

`placeholder` 속성

placeholder 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <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>