Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Form layout can be challenging when screen space is at a minimum. A horizontal layout with adjacent label and form makes the form fields difficult to work with because the text is so small. And if you zoom in to see the form input, the label might not be visible on the screen, making it more difficult to complete the form.
Vertically Stacked Forms
Positioning labels above each form element allows both the label and the form element to be visible at the same time. Make sure there is enough spacing between every form element that it is clear which label belongs with each form element.
Vertically Stacked Forms with Floating Labels
It’s popular to minimize the space required for form fields by using placeholder attributes to provide visual labels for the form elements. But the placeholder text goes away after text has been entered, so the "label" is no longer presented visually to the user. This makes it difficult to review entries on a form to ensure they’re correct.
Here’s a different approach that’s more accessible. The label element can be positioned where the placeholder text would normally be positioned. Once a form field receives focus, or when text is entered, the label is repositioned above the form element so the label is still available visually and programmatically.