정의 및 사용 방법

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

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

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

기본 예제

HTML 
<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password">
브라우저에서 실제 표시된 모습

관련 속성 사용하기

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

placeholder 속성

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

HTML 
<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password" placeholder="특수 문자 포함 10자 이상">
브라우저에서 실제 표시된 모습

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

접근성 고려 사항

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

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

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

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<input type="password" placeholder="사용자 비밀번호">
브라우저에서 실제 표시된 모습

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

value 속성

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

HTML 
<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password" value="mypass#123">
브라우저에서 실제 표시된 모습

disabled 속성

해당 요소를 비활성시키려면 disabled 속성을 사용하세요. 비활성화된 요소는 입력이나 값을 바꾸려 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다. 또한 폼 제출 시 값이 전송되지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password" value="mypass#123" disabled>
브라우저에서 실제 표시된 모습 입력이나 값을 바꾸려 해도 아무런 작동을 하지 않습니다.

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

readonly 속성

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

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

HTML 
<label for="user-password">사용자 비밀번호</label>
<input type="password" id="user-password" value="mypass#123" readonly>
브라우저에서 실제 표시된 모습 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.

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

maxlength 속성

maxlength 속성은 사용자가 입력할 수 있는 최대 문자 수(Maximum length)를 제한합니다. 해당 요소에 maxlength 속성이 지정되면, 사용자가 허용된 문자 수를 초과하여 입력하는 것을 방지할 수 있습니다.

  • 속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
  • 잘못된 값이 지정되면, 최대 문자 수 제한이 적용되지 않습니다.
  • 최대 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 minlength 속성이 설정되어 있다면, maxlength 속성 값은 반드시 그 값보다 크거나 같아야 합니다.

HTML 
<label for="user-password">사용자 비밀번호</label>

<!-- maxlength="10"으로 최대 10자 입력 제한 -->
<input type="password" id="user-password" maxlength="10" placeholder="최대 10자 이내">
실제 적용된 모습

minlength 속성

minlength 속성은 사용자가 입력해야 하는 최소 문자 수(Minimum length)를 지정합니다. 해당 요소에 minlength 속성이 지정되면, 사용자는 지정된 최소 문자 수 이상을 입력해야 합니다.

참고하세요!
minlength 속성은 최소로 입력해야 하는 값만을 체크합니다. 만약, 사용자가 해당 요소에 아무것도 입력하지 않으면 빈 값은 허용됩니다. 빈 값도 허용하지 않으려면 required 속성을 함께 사용하세요.

부연설명
required 속성은 해당 입력 필드를 필수로 조건에 맞게 입력해야만 양식이 제출되게 합니다.

  • 속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
  • 잘못된 값이 지정되면, 입력해야 하는 최소 문자 수 지정이 적용되지 않습니다.
  • 최소 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 maxlength 속성이 설정되어 있다면, minlength 속성 값은 반드시 그 값보다 작거나 같아야 합니다.

HTML 
<form>
    <label for="pw">비밀번호</label>
    
    <!-- minlength="2"으로 최소 2자 입력 요구 -->
    <input type="password" id="pw" minlength="2" placeholder="최소 2자 이상 입력..." required>
    <button type="submit">제출</button>
</form>
실제 적용된 모습 실습 가이드: minlength 작동 확인
  • 오류 확인: 입력 필드에 입력이 없거나 1글자만 입력한 후, [제출] 버튼을 클릭해 보세요. 브라우저가 최소 입력 조건(2글자) 미달 오류 메시지를 표시하는 것을 확인합니다.
  • 성공 확인: 필드에 2글자 이상 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

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

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

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>
브라우저에서 실제 표시된 모습 "비밀번호 가시성 토글(보기/숨기기) 버튼"을 클릭해 보세요.

브라우저 호환성

input type 속성의 password 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="password"> 1 12 1 1
placeholder 3 12 4 4
readonly 1 12 1 1

명세서

input type 속성의 password 값에 대한 명세서 사양
명세서 사양
<input type="password"> HTML Standard
#password-state-(type=password)

참고문헌

같이 보기