HTML DOM에서 Input Password의 defaultValue 속성은 비밀번호 입력 필드의 기본값(defaultValue)을 설정하거나 가져올 때 사용됩니다. 요소의 defaultValue란 HTML의 value 속성에 할당된 초기값을 의미합니다.
value 속성과 defaultValue 속성의 차이
두 속성은 비슷해 보이지만 중요한 차이가 있습니다.
- defaultValue 속성: HTML에 처음 지정된 원래 기본값을 그대로 유지합니다.
- value 속성: 사용자가 입력 필드에 직접 입력한 내용에 따라 실시간으로 변경됩니다.
즉, 사용자가 값을 수정한 이후에도 원래의 초기값이 필요할 때 defaultValue 속성을 활용하면 유용합니다.
구문(Syntax)
defaultValue 속성을 설정하는 구문은 다음과 같습니다.
passwordObject.defaultValue = value
여기서 value는 비밀번호 필드에 지정할 기본값입니다.
예제(Example)
Input Password defaultValue 속성의 실제 동작을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Password defaultValue Property</h1>
Password: <input type="password" id="PASS" value="abcd123">
<p>CHANGE 버튼을 클릭하여 위 비밀번호 필드의 기본값을 변경해 보세요.</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeDefault() {
document.getElementById("PASS").defaultValue="Password1234";
var P=document.getElementById("PASS").defaultValue;
document.getElementById("Sample").innerHTML = "기본값이 abc123에서 "+P+"(으)로 변경되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 아래와 같이 기본값이 변경된 것을 확인할 수 있습니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 비밀번호 입력 필드 생성
먼저 id가 PASS이고 기본값이 abcd123으로 지정된 비밀번호 입력 필드를 생성했습니다.
Password: <input type="password" id="PASS" value="abcd123">
2. CHANGE 버튼 생성
사용자가 클릭하면 changeDefault() 함수를 실행하는 버튼을 만들었습니다.
<button type="button" onclick="changeDefault()">CHANGE</button>
3. changeDefault() 함수의 동작
changeDefault() 함수는 getElementById() 메서드로 비밀번호 타입의 입력 필드를 가져온 뒤, 해당 요소의 defaultValue 속성을 Password1234로 설정합니다. 이어서 다시 getElementById() 메서드를 호출해 변경된 defaultValue 값을 읽어와 변수 P에 저장하고, 단락(p) 요소의 innerHTML 속성을 통해 id가 Sample인 영역에 그 결과를 출력합니다.
function changeDefault() {
document.getElementById("PASS").defaultValue="Password1234";
var P=document.getElementById("PASS").defaultValue;
document.getElementById("Sample").innerHTML = "기본값이 abc123에서 "+P+"(으)로 변경되었습니다";
}정리
defaultValue 속성은 폼을 초기화하거나, 사용자가 입력하기 전의 원래 값을 참조해야 하는 경우에 활용도가 높습니다. value 속성과의 차이를 정확히 이해하고 상황에 맞게 사용하면 더 안정적인 폼 처리 로직을 작성할 수 있습니다.