HTML DOM Input URL placeholder 속성 완벽 정리

HTML DOM에서 Input URL 요소의 placeholder 속성은 사용자가 어떤 값을 입력해야 하는지 힌트를 제공하는 문자열을 설정하거나 반환하는 데 사용됩니다. placeholder로 지정된 텍스트는 입력 필드가 비어 있을 때만 표시되며, 사용자가 실제로 값을 입력하면 사라집니다.

문법(Syntax)

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

1. 값 반환하기

inputURLObject.placeholder

2. 값 설정하기

inputURLObject.placeholder = stringValue

값을 설정할 때는 원하는 힌트 문구를 문자열(stringValue)로 전달하면 됩니다.

예제 코드

다음 예제는 버튼 클릭 시 URL 입력 필드에 placeholder를 동적으로 설정하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-placeholder</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect">
</label>
<input type="button" value="Get an Example" onclick="setPlaceholder()">
</fieldset>
</form>
<script>
    var inputURL = document.getElementById("URLSelect");
    function setPlaceholder() {
        inputURL.placeholder = 'https://www.google.com';
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Get an Example' 버튼을 클릭하기 전 — placeholder가 설정되어 있지 않아 입력 필드가 비어 있습니다.

HTML DOM Input URL placeholder 속성 완벽 정리

'Get an Example' 버튼을 클릭한 후 — JavaScript에 의해 placeholder가 'https://www.google.com'으로 설정되어 입력 필드에 힌트 텍스트가 표시됩니다.

HTML DOM Input URL placeholder 속성 완벽 정리

정리

placeholder 속성은 폼의 사용성(usability)을 높이는 간단하지만 유용한 기능입니다. 특히 URL처럼 입력 형식이 정해져 있는 필드에서는 올바른 형식의 예시를 미리 보여줌으로써 사용자의 입력 오류를 줄일 수 있습니다. 단, placeholder는 실제 레이블(label)을 대체할 수 없으므로 접근성을 고려한다면 반드시 label 요소와 함께 사용하는 것이 좋습니다.