HTML input password 기본 형태와 연관 속성 예제

HTML input password 기본 형태

<input type = "password"> 입력폼은 비밀번호를 입력하는 폼을 말합니다. <input> 태그의 type 속성명에 속성값으로 password를 입력합니다.

<form> 태그 및 지칭할 문자 등으로 적절히 조합해서 나열해줍니다. 생성된 입력창에 비밀번호를 입력해보면 특수문자로 표기됩니다.

<form>
   비밀번호 : <input type="password">
</form>

아이디와 패스워드

입력폼에서 <input type="text">는 아이디, <input type="password">는 패스워드가 될 수 있습니다.

<form>
  아이디 : <input type="text"><br>
  패스워드 : <input type="password">
</form>

연관 속성

placeholder

placeholder 속성은 비밀번호 입력창에 미리 메시지를 입력해놓을 수 있습니다. 지울 필요없이 비밀번호를 입력하면 자동으로 이전 메시지는 지워집니다.

<form>
  비밀번호 : <input type="password" placeholder="비밀번호를 입력하세요.">
</form>

maxlength

maxlength 속성은 password 입력시 최대 입력 문자 개수를 제한합니다.

<form>
   비밀번호 : <input type="password" maxlength="5">
</form>

minlength

minlength 속성은 최소 입력 문자 개수를 제한합니다.

<form>
  비밀번호 : <input type="password" minlength="5">
</form>

size

size 속성은 password 입력폼의 가로 길이를 조절합니다. 기본 사이즈는 20입니다.

<form>
     <input type="password" size="40">
</form>