HTML DOM의 input password required 속성은 <input> 요소의 required(필수) 속성과 연결된 기능입니다. 이 속성은 폼(form)을 서버로 제출하기 전에 해당 비밀번호 필드를 반드시 채워야 하는지 여부를 설정하거나 반환하는 데 사용됩니다.
required 속성이 지정된 비밀번호 필드가 비어 있는 상태에서 사용자가 폼을 제출하려고 하면, 브라우저는 폼 제출을 차단하여 데이터가 서버로 전송되지 않도록 합니다. 이를 통해 클라이언트 측에서 간단하게 필수 입력 검증을 수행할 수 있습니다.
문법(Syntax)
required 속성을 설정하는 문법은 다음과 같습니다.
textObject.required = true|false
true는 폼을 제출하기 전에 해당 필드를 반드시 채워야 함을 의미하고, false는 필드 입력이 선택 사항임을 의미합니다.
예제(Example)
input password required 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input password required property</h1>
<p>아래 버튼을 클릭하여 위 필드가 필수 입력인지 확인해 보세요</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS1" name="passW" required>
<input type="submit">
</form>
<br>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("PASS1").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The password field must be filled before submitting";
else
document.getElementById("Sample").innerHTML="The password field is optional and can be left blank by the user";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 비밀번호 입력 필드와 CHECK 버튼이 화면에 표시됩니다.
CHECK 버튼을 클릭하면 해당 필드가 필수 입력인지 여부가 아래 단락에 메시지로 출력됩니다.
만약 required 속성이 true로 설정된 상태에서 값을 입력하지 않고 submit 버튼을 누르면, 브라우저가 폼 제출을 막고 사용자에게 필드를 채우라는 알림을 표시합니다.
코드 상세 설명
1. 비밀번호 입력 필드 생성
먼저 id가 "PASS1", name이 "passW"이며 required 속성이 true로 설정된 비밀번호 입력 필드를 생성했습니다. 이 필드는 action="Sample_page.php"로 지정된 폼 내부에 포함되어 있으며, submit 버튼을 클릭하면 폼 데이터가 해당 주소로 전송됩니다.
<form action="/Sample_page.php"> Password: <input type="password" id="PASS1" name="passW" required> <input type="submit"> </form>
2. CHECK 버튼 생성
사용자가 클릭하면 checkReq() 함수를 실행하는 CHECK 버튼을 만들었습니다.
<button onclick="checkReq()">CHECK</button>
3. checkReq() 함수 로직
checkReq() 함수는 getElementById() 메서드를 사용해 type이 password인 입력 요소를 가져오고, 해당 요소의 required 속성 값을 읽어옵니다. 이 예제에서는 required 속성이 설정되어 있으므로 true가 반환됩니다.
반환된 불리언(boolean) 값은 변수 Req에 할당되며, 값이 true인지 false인지에 따라 innerHTML 속성을 통해 id가 "Sample"인 단락에 적절한 메시지를 출력합니다.
function checkReq() {
var Req=document.getElementById("PASS1").required;
if(Req==true)
document.getElementById("Sample").innerHTML="The password field must be filled before submitting";
else
document.getElementById("Sample").innerHTML="The password field is optional and can be left blank by the user";
}마무리
required 속성은 별도의 JavaScript 유효성 검사 코드 없이도 HTML만으로 필수 입력 검증을 구현할 수 있는 강력한 기능입니다. 특히 회원가입, 로그인 폼처럼 비밀번호 입력이 반드시 필요한 경우에 유용하게 활용할 수 있습니다. DOM의 required 속성을 활용하면 런타임 중에 동적으로 필수 여부를 변경하는 것도 가능합니다.