HTML DOM 입력 이메일 defaultValue 속성 완벽 정리

HTML DOM의 Input Email defaultValue 속성은 이메일 입력 필드에 해당하는 기본값(default value)을 설정하거나 반환하는 기능을 합니다. 사용자가 이메일 입력란에 직접 타이핑하면 value 속성 값은 변경되지만, defaultValue는 변하지 않고 HTML에 처음 지정된 초기 값을 그대로 유지합니다.

문법(Syntax)

defaultValue 속성의 기본 문법은 다음과 같습니다.

1. 문자열 값 반환하기

inputEmailObject.defaultValue

2. defaultValue에 문자열 설정하기

inputEmailObject.defaultValue = 'string'

예제(Example)

아래 예제를 통해 Input Email defaultValue 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email defaultValue</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-defaultValue</legend>
<label for="EmailSelect">User Email :
<input type="email" id="EmailSelect" value="xyz@abc.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    divDisplay.textContent = 'defaultValue: '+inputEmail.defaultValue;
    function getDefaultValue() {
        var currentValue = inputEmail.value;
        divDisplay.textContent = 'Value - '+inputEmail.value+' resets to - '+inputEmail.defaultValue;
        inputEmail.value = inputEmail.defaultValue;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과 화면을 볼 수 있습니다.

'Reset Default Value' 버튼을 클릭하기 전 — 페이지 로드 시 defaultValue가 표시됩니다.

HTML DOM 입력 이메일 defaultValue 속성 완벽 정리

이메일 입력값 변경 중 — 사용자가 입력란을 수정해도 defaultValue는 그대로 유지됩니다.

HTML DOM 입력 이메일 defaultValue 속성 완벽 정리

'Reset Default Value' 버튼 클릭 후 — 변경된 값이 원래의 기본값으로 초기화됩니다.

HTML DOM 입력 이메일 defaultValue 속성 완벽 정리

정리

defaultValue 속성은 폼 초기화(reset) 기능을 직접 구현할 때 특히 유용합니다. 사용자가 입력값을 자유롭게 변경하더라도, 자바스크립트에서 inputEmail.value = inputEmail.defaultValue 한 줄만으로 언제든지 처음 상태로 되돌릴 수 있기 때문입니다.