I had a need to reduce the overall height of the form (at least on load).
A mockup had all the input labels as placeholders.
In material design, there is a thing called "floating labels",
which just means that the labels display as placeholders and move above/below when focused.
This allows you to keep the <label>
functionality.
The following code applies floating labels to normal and complex (e.g., address) fields.