HTML 강좌 / 양식에 안내 문구 추가하기

HTML 양식의 빈 입력칸 안에 짧은 안내 문구를 표시하려면 placeholder 속성을 사용합니다. 항목의 이름은 label로 표시하고, 미리 채워 둘 실제 입력값은 value로 지정합니다. 안내 문구와 입력값을 구분하면 예시 문장이 사용자 데이터로 제출되는 실수를 피할 수 있습니다.

label, placeholder, value의 차이

label은 “이메일”, “문의 내용”처럼 입력 항목의 이름을 알려 주는 요소입니다. placeholder는 값이 비어 있을 때 입력칸 안에 보이는 짧은 힌트이며, input의 value 속성은 처음 표시할 입력값을 정합니다.

예를 들어 “이메일”은 항목 이름으로, “예: hong@example.com”은 입력 예시로 적합합니다. 빈 문의 양식에 예시 주소를 value로 넣으면 실제 주소로 오해할 수 있으므로 placeholder에 넣는 편이 알맞습니다. 기존 회원 정보를 수정하는 화면처럼 저장된 주소를 미리 보여 줄 때는 value가 필요합니다.

input에 placeholder 추가하기

입력칸의 여는 태그에 placeholder="안내 문구"를 추가합니다. 다음 예제는 이메일 입력칸이 비어 있을 때 예시 주소를 보여 줍니다.

<label for="email">이메일</label>
<input type="email" id="email" name="email"
       placeholder="예: hong@example.com">

label의 for 값과 입력칸의 id 값을 같게 지정하면 둘이 연결됩니다. name은 제출 데이터에서 항목을 식별하는 이름입니다. 세 속성의 역할은 다르므로 id만 지정하고 name을 빠뜨리지 않도록 합니다. 연결 방법은 label과 input으로 입력 필드 만들기에서 더 자세히 확인할 수 있습니다.

HTML 표준에서 input의 placeholder를 지원하는 유형은 text, search, tel, url, email, password입니다. 날짜나 숫자 입력칸에 같은 표시를 기대하지 말고, 입력칸 밖에 설명을 배치하세요. HTML 표준의 placeholder 정의와 input 유형별 속성 적용 표에서 범위를 확인할 수 있습니다.

textarea에 안내 문구 넣기

여러 줄을 입력하는 textarea에도 placeholder를 사용할 수 있습니다. 안내만 보여 주려면 여는 태그와 닫는 태그 사이에 기본 내용을 넣지 않습니다.

<label for="message">문의 내용</label>
<textarea id="message" name="message" rows="4"
          placeholder="예: 배송 예정일을 알고 싶습니다."></textarea>

textarea의 초기 값은 value 속성이 아니라 태그 사이의 텍스트로 지정합니다. 다음처럼 작성하면 “배송 예정일을 알려 주세요.”가 힌트가 아닌 실제 입력값으로 표시됩니다.

<textarea name="message">배송 예정일을 알려 주세요.</textarea>

코드를 보기 좋게 정리하려고 textarea 태그 사이에 들여쓰기나 공백을 넣어도 입력값의 일부가 될 수 있습니다. 빈 입력칸의 안내가 보이지 않는다면 태그 사이에 남은 텍스트부터 확인하세요. 초기 값과 placeholder의 정의는 HTML 표준의 textarea 설명에 나와 있습니다.

입력 중에도 필요한 설명은 밖에 표시하기

placeholder는 입력을 시작하면 사라지므로 항목 이름이나 중요한 조건을 대신할 수 없습니다. “이메일” 같은 이름은 보이는 label로 유지하고, 입력 중에도 확인해야 할 설명은 별도 문장으로 둡니다.

<label for="email">이메일 (필수)</label>
<input type="email" id="email" name="email"
       placeholder="예: hong@example.com"
       aria-describedby="email-help" required>
<p id="email-help">답변을 받을 이메일 주소를 입력하세요.</p>

aria-describedby는 입력칸과 추가 설명을 연결하는 접근성 속성입니다. 값으로 설명 요소의 id를 지정하면 화면 낭독기 같은 보조 기술이 그 설명을 이용할 수 있습니다. 연결만 해 두고 설명을 숨기기보다는, 이 예제처럼 화면에서도 읽을 수 있게 배치합니다. W3C의 입력 양식 설명 연결 예제도 같은 방식을 안내합니다.

전체 예제: 필수 이메일과 선택 문의 내용

아래 코드를 UTF-8로 저장한 form-guide.html 파일에 넣고 브라우저로 열면 동작을 확인할 수 있습니다. 이메일은 필수로, 문의 내용은 선택으로 지정했습니다. 안내 문구의 색은 흰 배경에서 읽기 쉽도록 정하고, 작은 화면에서는 입력칸이 양식 너비에 맞춰 줄어들게 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>양식 안내 문구 예제</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>문의하기</h1>
  <form method="get">
    <p>
      <label for="email">이메일 (필수)</label>
      <input type="email" id="email" name="email"
             placeholder="예: hong@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">답변을 받을 이메일 주소를 입력하세요.</p>
    <p>
      <label for="message">문의 내용 (선택)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="예: 배송 예정일을 알고 싶습니다."></textarea>
    </p>
    <button type="submit">제출</button>
  </form>
</body>
</html>

처음에는 두 입력칸에 안내 문구가 보입니다. 이메일을 입력하면 예시 주소는 사라지지만 “이메일 (필수)”와 입력칸 아래 설명은 남습니다. 값을 모두 지우면 안내 문구가 다시 보입니다.

1. 이메일을 비워 둔 상태로 제출 버튼을 누릅니다. 일반적인 브라우저 제출에서는 required 검사로 제출이 막힙니다.
2. 이메일 칸에 abc를 넣고 다시 제출합니다. type="email"의 형식 검사로 제출이 막힙니다.
3. hong@example.com처럼 형식에 맞는 주소를 입력하고 문의 내용은 비워 둡니다. 선택 항목이 비어 있어도 제출할 수 있습니다.

required는 빈 값을 검사하고, type="email"은 이메일 형식을 검사합니다. 형식이 맞는다고 실제로 존재하는 주소까지 확인되는 것은 아닙니다. 오류 메시지의 문구와 모양은 브라우저 및 언어 설정에 따라 달라집니다.

이 예제는 서버에 문의를 저장하는 기능을 포함하지 않습니다. action을 생략한 GET 양식이므로 브라우저의 일반 제출은 현재 문서 주소를 대상으로 합니다. 서버에서 제공되는 파일로 실행하면 주소의 쿼리 문자열로 제출 값을 확인할 수 있지만, 로컬 파일로 열었을 때의 처리는 환경에 따라 다를 수 있습니다. 실제 서비스에서는 처리할 서버 주소와 제출 방식을 정해야 합니다.

placeholder와 value는 어떻게 제출되나요?

placeholder 문구는 입력값으로 제출되지 않지만, 해당 항목의 빈 값은 제출 데이터에 포함될 수 있습니다. 예를 들어 name="email"이 있는 활성화된 입력칸을 비워 두고 필수 검사를 하지 않는 양식을 GET으로 제출하면 email=처럼 이름과 빈 값이 전달될 수 있습니다. name이 없거나 disabled인 입력칸은 일반적인 제출 항목에서 제외됩니다. 이 차이는 HTML 표준의 제출 데이터 구성 규칙에 따른 것입니다.

<form id="compare-form">
  <input type="text" name="default_name" value="홍길동">
  <input type="text" name="hint_name" placeholder="예: 홍길동">
</form>

위 코드를 별도의 HTML 파일에서 연 뒤 브라우저 개발자 도구의 콘솔에 다음 코드를 실행해 보세요. FormData는 양식의 이름과 현재 값으로 데이터 목록을 만드는 기능입니다. 여기서는 서버로 전송하지 않고 목록만 확인합니다.

Array.from(new FormData(document.getElementById("compare-form")).entries())

아무 값도 바꾸지 않았다면 결과는 다음과 같습니다. value로 넣은 “홍길동”은 값에 포함되고, placeholder의 “예: 홍길동”은 포함되지 않습니다.

[["default_name", "홍길동"], ["hint_name", ""]]

두 번째 입력칸에 “김민수”를 입력하고 같은 코드를 다시 실행하면 hint_name의 값이 “김민수”로 바뀝니다. 첫 번째 입력칸도 사용자가 수정하면 현재 값이 목록에 포함됩니다.

required를 넣어도 value로 실제 값이 미리 채워져 있으면 단순한 빈 값 검사를 통과할 수 있습니다. 또한 FormData 생성 자체는 필수 입력 검사를 수행하지 않습니다. 사용자 제출 시 검사와 데이터 목록 생성을 구분하고, 실제 서비스에서는 서버에서도 입력값을 검증하세요.

안내 문구가 안 보이거나 잘 읽히지 않을 때

• 입력칸에 값이 있는지 확인합니다. value, textarea 내부 텍스트, 브라우저 자동 완성이나 스크립트가 채운 값이 있으면 placeholder는 표시되지 않습니다.
• 지원하는 input 유형인지 확인합니다. 날짜처럼 별도 UI가 있는 입력칸은 짧은 안내를 입력칸 밖에 두는 편이 확실합니다.
• 문구가 너무 길지 않은지 확인합니다. 입력칸 안에는 짧은 예시를 넣고, 상세 조건은 보이는 설명으로 분리합니다. input의 placeholder에는 줄바꿈을 넣지 않습니다.
• 문자색과 배경색을 확인합니다. 너무 연한 색이나 낮은 불투명도 때문에 안 보일 수 있습니다. 색을 바꾼 뒤 모바일 화면에서도 읽히는지 확인합니다.

placeholder의 글자색과 모양은 CSS의 ::placeholder 가상 요소로 지정합니다. CSS는 웹페이지의 모양을 정하는 스타일 언어이며, 전체 예제에서는 안내 문구의 색과 불투명도를 조정하는 데 사용했습니다. 구체적인 꾸미기 방법은 placeholder의 색과 글자 모양을 꾸미는 방법을 참고하세요. 항목 이름은 label, 짧은 예시는 placeholder, 계속 확인해야 하는 조건은 별도 설명으로 나누면 입력 중에도 필요한 정보를 읽을 수 있습니다.