Design Atlas
한국어
❝ UX writing

Placeholder vs. Label

플레이스홀더 vs 라벨

A placeholder vanishes the moment you type — why it can't substitute for a label. Watch it happen in a real <input>.

Also known as: Floating label
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <input class="finput" id="bi" readonly>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <span class="flabel" id="glabel"></span>
    <input class="finput" id="gi" readonly>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.flabel{font:700 11px/1 -apple-system,sans-serif;color:var(--fg)}
.finput{height:30px;border-radius:7px;border:1px solid var(--line);background:var(--bg);padding:0 10px;font:600 13px/1 -apple-system,sans-serif;color:var(--fg);width:100%}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted)}
js
const bi = document.getElementById('bi'), gi = document.getElementById('gi');
const glabel = document.getElementById('glabel'), bw = document.getElementById('bw'), gw = document.getElementById('gw');
const L = {
  ko: { ph: '이름', val: '홍길동', bw: '입력하면 힌트가 통째로 사라져요', gw: '라벨이 항상 보여서 맥락이 유지돼요' },
  en: { ph: 'Name', val: 'Jordan Lee', bw: 'the hint disappears once you type', gw: 'the label stays visible the whole time' },
};
let lang = 'ko', filled = false;
function paint() {
  const t = L[lang];
  bi.placeholder = t.ph; gi.placeholder = t.ph; glabel.textContent = t.ph;
  bi.value = filled ? t.val : ''; gi.value = filled ? t.val : '';
  bw.textContent = t.bw; gw.textContent = t.gw;
}
paint();
setInterval(() => { filled = !filled; if (!filled) lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 1700);

A 'placeholder' is a pre-fill hint, not a 'label'. The moment you type a value, the browser erases it — hand it the label's job and users forget what the field was for the instant they fill it in.

Fine for a single short field, but it breaks down once a form has several fields, someone scrolls back up, or autofill populates values silently. Screen readers also don't treat placeholders as reliably as real labels.

The demo uses two real input elements. Fill in the same value: the ✕ field's hint disappears entirely, while the ✓ field keeps its label above, so context survives.

When to use

A single short search box can get away with a placeholder alone, but any form with 2+ fields needs real labels.