[HTML] <input> 태그로 패스워드(비밀번호) 입력란 만들기

지난번 포스팅에서는 <form> 태그를 활용하여 사용자의 입력을 받는 방법을 알아보았습니다.

[HTML] <form> 태그로 사용자 입력 받기

<form> 태그 안에는 여러가지 구성요소를 넣어서,

다양한 형태의 입력을 받을 수 있다고 했습니다.

가장 대표적인 요소는 <input> 태그입니다.

이번에는 이 <input> 태그를 사용하여, 비밀번호 입력란을 만들어 보도록 하겠습니다.

<input> 태그로 패스워드 입력란 만들기

먼저, <input> 태그의 'type' 속성에 들어갈 수 있는 값들은 어떤 것들이 있을까요?

• text 일반 텍스트를 입력받을 수 있습니다.
• password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.
• submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.
• button 버튼을 생성해 줍니다.
• checkbox 체크박스 형태의 입력을 받을 수 있습니다.
• radio 라디오 버튼 형태의 입력을 받을 수 있습니다.
• reset <form> 태그 안의 사용자 입력을 초기화 합니다.

이 외에도 HTML5부터 지원하기 시작한 type들이 더 있습니다.

color, date, datetime-local, email, month, number, range, search, tel, time, url, week 등

이번에는 <input> 태그와 'type' 속성을 이용하여 

패스워드 입력 필드를 만들어 보도록 하겠습니다.

패스워드 입력 필드를 만들기 위해서

'type' 속성에 들어갈 수 있는 값 중, 패스워드 입력 창을 만들기 위해서 'password' 라는 값을 사용합니다.

See the Pen html example by anna (@hianna) on CodePen.

위의 예제를 보면

userid 항목에는 'type'이 'text'로 지정되었고,

pwd 항목은 'type'이 'password'로 지정이 되었습니다.

실제로 ID란과 PASSWORD란에 입력을 해보면

ID란에는 입력되는 문자가 그대로 보여지지만,

PASSWORD란에는 입력되는 문자가 그대로 보여지지 않고, '*'나 '●'로 나오는 것을 볼 수 있습니다.

'*' 모양으로 나오느냐 '●' 모양으로 나오느냐는 사용하는 브라우저에 따라 달라집니다.

이번에는

패스워드의 길이를 5자리로 제한해 보겠습니다.

입력된 패스워드의 길이가 5자리가 넘으면 더 이상 입력이 되지 않도록 하겠습니다.

See the Pen html example by anna (@hianna) on CodePen.

패스워드 입력 <input> 태그 안에 'maxlength'='5' 라는 속성을 추가하였습니다.

가장 긴 입력값을 5로 제한한다는 의미입니다.

이제 아무리 5자리 이상 입력을 하려고 해도 더 이상 입력이 되지 않습니다.

이 외에도 <input> 태그에 입력할 수 있는 다양한 속성들이 더 있습니다.

align, alt, disabled, readonly, size, value..

나머지 속성들은 다음에 다루도록 하겠습니다.

이것으로,

브라우저에 비밀번호를 입력 받고, 길이 제한을 할 수 있게 되었습니다.