HTML 폼에서 비밀번호 입력을 받으려면 <input> 태그의 type 속성을 password로 지정하면 됩니다. 이 입력 방식은 일반적인 한 줄 텍스트 입력과 동일하지만, 사용자가 문자를 입력하는 즉시 해당 값이 점(•) 형태로 마스킹되어 화면에 그대로 노출되지 않습니다.
비밀번호 입력 필드의 기본 구조
기본 문법은 다음과 같습니다.
<input type="password" name="password">
type="password"로 설정된 입력 필드는 브라우저 차원에서 입력 내용을 가려주기 때문에, 로그인·회원가입 페이지 등 민감한 정보를 다루는 폼에서 반드시 사용해야 합니다.
예제 코드
다음 예제를 실행하면 HTML 폼에서 사용자 이름과 비밀번호를 함께 입력받는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Forms</title> </head> <body> <p>정보를 입력하세요:</p> <form> 학생 아이디:<br> <input type="text" name="name"> <br> 비밀번호:<br> <input type="password" name="password"> <br> </form> </body> </html>
위 코드를 브라우저에서 열면 아이디 입력란에는 입력한 글자가 그대로 보이고, 비밀번호 입력란에는 입력 즉시 점(•)으로 표시되는 것을 확인할 수 있습니다.
실무에서 유용한 추가 속성
실제 서비스를 개발할 때는 보안과 사용자 편의성을 높이기 위해 아래 속성들을 함께 활용하는 것이 좋습니다.
- placeholder: 입력 전 안내 문구를 표시합니다. 예:
placeholder="8자 이상 입력" - required: 값을 입력하지 않으면 폼 제출이 되지 않도록 강제합니다.
- minlength / maxlength: 비밀번호 최소·최대 길이를 지정합니다.
- autocomplete="new-password": 회원가입 시 브라우저가 기존 비밀번호를 잘못 자동 완성하는 것을 방지합니다.
이처럼 <input type="password"> 하나만으로도 간단하게 비밀번호 입력 필드를 구현할 수 있으며, 추가 속성을 조합하면 더욱 안전하고 사용하기 편리한 폼을 만들 수 있습니다.