HTML DOM 입력 이메일(Input Email) placeholder 속성 완벽 정리

HTML DOM Input Email placeholder 속성이란?

HTML DOM의 Input Email placeholder 속성은 이메일 타입(<input type="email">) 입력 필드에 표시되는 힌트 문자열을 설정하거나 반환하는 속성입니다. placeholder는 사용자가 실제로 어떤 형식의 값을 입력해야 하는지 시각적으로 안내하는 역할을 하며, 사용자가 텍스트를 입력하기 시작하면 자동으로 사라집니다.

문법(Syntax)

1. placeholder 값 반환하기

inputEmailObject.placeholder

2. placeholder 값 설정하기

inputEmailObject.placeholder = stringValue

위 문법에서 stringValue에는 입력 필드에 표시할 힌트 문구를 문자열로 지정합니다.

실습 예제

버튼을 클릭하면 이메일 입력 필드에 placeholder가 동적으로 설정되는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email placeholder</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-placeholder</legend>
<label for="EmailSelect">Employee ID :
<input type="email" id="EmailSelect">
</label>
<input type="button" value="어떤 정보를 입력해야 하나요?" onclick="setPlaceholder()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    function setPlaceholder() {
        inputEmail.placeholder = 'Name-ID@MNC.com';
        divDisplay.textContent = inputEmail.placeholder+' --> Name과 ID를 본인의 정보로 교체하세요.';
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같이 동작합니다.

버튼 클릭 전

초기 상태에서는 이메일 입력 필드에 아무런 힌트도 표시되지 않습니다.

HTML DOM 입력 이메일(Input Email) placeholder 속성 완벽 정리

버튼 클릭 후

'어떤 정보를 입력해야 하나요?' 버튼을 클릭하면 setPlaceholder() 함수가 실행되어 입력 필드에 Name-ID@MNC.com이라는 힌트가 나타나고, 하단 설명 영역에도 해당 안내 문구가 출력됩니다.

HTML DOM 입력 이메일(Input Email) placeholder 속성 완벽 정리

정리

placeholder 속성은 JavaScript를 통해 동적으로 변경할 수 있어, 상황에 따라 입력 양식의 안내 문구를 유연하게 바꾸고 싶을 때 매우 유용합니다. 특히 회원가입 폼이나 로그인 폼처럼 사용자에게 올바른 입력 형식을 직관적으로 전달해야 하는 UI에서 활용도가 높습니다.