Schwebende Labels 1.2.0

Erstelle animierte Formular-Labels, die mit .velin-float-label über der Eingabe schweben, wenn sie fokussiert oder gefüllt ist. English: Floating Labels

Reifegrad: .velin-float-label ist in 1.2.0 stabiles CSS. Bevorzuge statische Labels, wenn Klarheit wichtiger ist als Dichte.

Wann verwenden

Kompakte Login- oder Marketingformulare, bei denen eine schwebende Beschriftung vertikalen Platz spart.
Eingaben, die ein Leerzeichen als placeholder=" " behalten können, damit der CSS-Trigger :placeholder-shown funktioniert.
Kombiniere sie mit .velin-input / .velin-select / .velin-textarea und einem .velin-label-Sibling nach dem Control.

Wann nicht

Lange Formulare, komplexe Anweisungen oder Felder, die dauerhaft sichtbare Labels über dem Control brauchen.
Lasse for/id nicht weg - das Schweben ist nur visuell; der zugängliche Name kommt weiterhin vom Label.
Nutze schwebende Labels nicht als Ersatz für Fehlertext - verwende weiterhin Validierung / form-summary.

Einfaches Beispiel

Wickle Eingabe und Label in .velin-float-label. Die Eingabe muss vor dem Label stehen, und ein placeholder-Attribut ist erforderlich (es darf ein Leerzeichen sein).

E-Mail-Adresse

Passwort

<div class="velin-float-label">
  <input type="email" class="velin-input" id="email" placeholder=" ">
  <label class="velin-label" for="email">Email address</label>
</div>

<div class="velin-float-label">
  <input type="password" class="velin-input" id="password" placeholder=" ">
  <label class="velin-label" for="password">Password</label>
</div>

Textarea

Schwebende Labels also work with <textarea> elements.

Deine Nachricht

<div class="velin-float-label">
  <textarea class="velin-input" id="msg" placeholder=" " rows="3"></textarea>
  <label class="velin-label" for="msg">Your message</label>
</div>

Auswahl

Nutze dies mit .velin-select für Selects mit schwebendem Label.

Kategorie

<div class="velin-float-label">
  <select class="velin-select" id="category">
    <option selected>Choose…</option>
    <option value="1">Option 1</option>
  </select>
  <label class="velin-label" for="category">Category</label>
</div>

Halte ein echtes <label class="velin-label"> mit dem Control verknüpft - die Bewegung der Beschriftung ist allein kein zugänglicher Name.
Respektiere prefers-reduced-motion; schwebende Übergänge sollten nicht der einzige Fokus-Hinweis sein.
Errors still need text + aria-invalid via Validierung.

Formularsteuerung · Überblick · Layout
Validierung · Form Summary