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

password 유형의 <input> 요소는 사용자가 비밀번호를 드러나지 않게 입력할 수 있는 컨트롤입니다.

<input type="password">는 한 줄짜리 평문 텍스트 편집 컨트롤로 제공되지만, 텍스트를 별표(”*“)나 점(”•”) 등 다른 문자로 가려서 읽을 수 없게 합니다. 가리는 문자는 사용자 에이전트나 운영체제에 따라 다를 수 있습니다.

<form id="form">
  <label for="username">사용자 이름:</label>
  <input autocomplete="username" id="username" name="username" type="text" />

  <label for="password">비밀번호 (8글자 이상):</label>
  <input autocomplete="new-password" id="password" minlength="8" name="password" type="password" required />

  <button type="submit">회원가입</button>
</form>

label {
  display: block;
}

button,
label {
  margin-top: 1rem;
}

document.getElementById('form').addEventListener('submit', (event) => {
  event.preventDefault()
})

입력 시 가리는 기능의 정확한 동작은 브라우저마다 조금씩 다를 수 있습니다. 사용자가 입력한 문자를 가리기 전에 잠시 보여줄 수도 있고, 가리기 기능을 켜고 끄는 버튼을 제공할 수도 있습니다. 두 동작 모두 사용자가 비밀번호를 올바르게 입력했는지 다시 확인하고 싶을 때, 특히 오타에 취약한 모바일 기기에서 유용하게 쓰일 수 있습니다.

값

password 유형의 값은 문자열입니다. 값의 형식을 제한하려면 minlength, maxlength, pattern 특성을 사용하세요.

추가 특성

password 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

maxlength

입력 값의 유효한 최대 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 긴 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다. 기본 설정에서, 브라우저는 사용자가 입력하는 값의 길이를 이 특성의 값으로 제한합니다.

minlength

입력 값의 유효한 최소 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 짧은 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다.

pattern

제약 검증을 만족하려면 입력 값이 일치해야 하는 정규표현식을 지정합니다. JavaScript RegExp가 인식할 수 있는 정규표현식이어야 합니다. 정규표현식을 컴파일할 때 u 플래그를 지정하므로 패턴은 항상 Unicode 코드 포인트의 시퀀스로 취급합니다. 정규표현식을 열고 닫는 슬래시는 생략해야 합니다.

유효하지 않은 값을 지정한 경우 무시합니다.

pattern 특성을 사용할 땐 반드시 <input> 근처의 부가 설명으로 형식에 대한 도움말을 제공하세요. <input>에 aria-describedby 특성을 추가해서 설명과 연결하면 접근성을 강화할 수 있습니다.

여기에 더해서 title 특성으로 정확한 요구사항을 설명하면 대부분의 브라우저에서 툴팁으로 보여줄 것입니다. 하지만 title 특성의 접근성 문제를 고려하면 일반 텍스트 설명 없는 title만 단독으로 사용하지는 말아야 합니다.

비밀번호 입력 칸에 pattern 특성을 지정하면 대소문자 혼합, 숫자 필요 등 웹 사이트가 요구하는 조건의 비밀번호를 사용자가 생성할 때 도움이 됩니다. 유효성 검증에서 더 알아보세요.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다. placeholder에 어울리는 값은 “비밀번호”가 아니라 “abcd1234”처럼 요구 조건을 만족하는 비밀번호 예시, 또는 가려진 비밀번호를 흉내내는 ”********” 따위를 고려할 수 있습니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input>의 레이블 절을 참고하세요.

readonly

입력 칸을 읽기 전용으로 만들어 사용자가 편집할 수 없도록 하는 불리언 특성입니다. 하지만 JavaScript를 사용해 HTMLInputElement의 value 속성을 직접 설정하면 값을 바꿀 수 있습니다.

읽기 전용 입력 칸에는 사용자가 값을 입력할 수 없으므로, readonly를 추가한 요소에 required 특성을 추가하면 아무 효과도 없습니다.

유효성 검증

8글자 이상, 특수기호 포함 등 사용자의 비밀번호에 요구하는 조건이 있다면 pattern 특성과 정규표현식을 사용해 사용자가 값을 입력할 때 유효성 확인에 도움을 줄 수 있습니다.

아래 예제는 4글자 이상, 8글자 이하의 16진수 문자만 검증을 통과하는 비밀번호 입력 칸을 보입니다.

<label for="hex-id">16진수 ID: </label>
<input
  autocomplete="new-password"
  id="hex-id"
  pattern="[0-9a-fA-F]{4,8}"
  required
  title="4~8글자의 16진수 문자로 구성된 ID를 입력하세요."
  type="password" />
<span class="validity valid">✓</span>
<span class="validity invalid">✗</span>

.validity {
  display: none;
}

#hex-id:valid ~ .valid {
  display: inline;
}
#hex-id:invalid ~ .invalid {
  display: inline;
}

명세

• HTML Standard

브라우저 호환성