Should labels sit above fields, beside them, or inside them?

Put labels above their fields by default, keep side labels for the narrow case of compact, simple forms, and avoid using placeholder text inside the field as the label entirely. Above wins for most forms because it scans fastest, since the eye runs straight down a single vertical line of label-then-field with no horizontal jumps, and it adapts to any width including the narrow column of a phone without breaking. The three positions are not equivalent options to pick by taste. They have measurable differences in scannability, alignment cost, and accessibility, and those differences point clearly to above as the safe default.

The reasoning starts with how people read a form. A top-aligned label sits directly above the input it describes, so the user reads the label and lands on the field in one smooth downward motion, and the layout stays clean whether the form is one column wide or stretched across a desktop. Side labels save vertical space, which can matter in a dense settings panel, but they cost you alignment and width: long labels and short labels never line up neatly, the available room for the input shrinks, and on a narrow screen the label and field either cramp together or have to reflow anyway. So the side position trades a real benefit, compactness, for two real costs, and that trade only pays off when space is genuinely tight and the labels are short and uniform.

The position to treat with suspicion is inside the field, where the label lives as placeholder text. It looks clean in a mockup, but it fails the moment someone starts using it. The placeholder vanishes the instant the user types, so anyone who pauses mid-form loses the reminder of what the field even was, and people filling forms get interrupted constantly. Worse, placeholder text is a known accessibility problem: screen readers treat it inconsistently, its low contrast is hard to read, and it leaves the field with no persistent programmatic label. Imagine a checkout where every field says “Email,” “Card number,” “Expiry” only until you click in, then goes blank, and a user who tabs back to fix a typo cannot tell which empty box was which. That is the cost of the clean look.

The catch is that side labels are not wrong, they are situational, so reserve them for forms that are short, simple, and space-constrained where their compactness genuinely helps and their alignment cost stays small. A two-field inline filter or a tight preferences row can carry side labels comfortably. And a real placeholder still has a job, just not as the label: it can show an example format like a date pattern or a sample phone number alongside a proper visible label, which is the legitimate use the save-space approach perverts when it makes the placeholder do the labeling.

So when you lay out a form, make above the position you reach for first and only deviate with a reason. Drop to side labels when the form is small and space is at a premium and the labels are short enough to align cleanly. Never let placeholder text stand in for the label, because the moment the user types or pauses, the field goes anonymous and the screen reader loses it. Default to labels above, keep them visible, and your forms will scan faster and stay usable for everyone.