input 요소의 placeholder 속성을 사용하여 입력 상자 안에 텍스트가 없을 때 나타나는 기본 힌트 텍스트를 구현할 수 있다.
사용자가 입력 상자에 포커스를 주면 placeholder 텍스트는 사라지게 된다,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder 텍스트 예제</title>
</head>
<body>
<label for="inputText">입력: </label>
<input type="text" id="inputText" placeholder="단어 입력">
<script src="script.js"></script>
</body>
</html>위 코드에서 placeholder 속성에 "단어 입력"이라는 힌트 텍스트를 추가했다.
이 힌트 텍스트는 입력 상자가 비어 있을 때 나타나며, 사용자가 입력 상자에 포커스를 주면 사라지게 된다.
포커스를 주거나 입력을 하지 않은 상태에 따라 힌트 텍스트가 나타나거나 사라지는 기능은 브라우저에 기본적으로 내장되어 있으므로 별도의 JavaScript 코드 없이도 동작한다.