Floating Labels

Keep a real label that floats on focus or value.

Label stays in the document

Use a space placeholder so :placeholder-shown can detect an empty field. The visible name still comes from the label.

Important pattern

Empty fields use a space placeholder so the float state can detect emptiness.

<div class="float-field">
  <input class="field" id="f-email" placeholder=" " required>
  <label for="f-email">Email address</label>
</div>