1. Docs
2. Formulare
3. Überblick

Formulare Überblick 1.2.0

VelinStyle bietet ein zusammenhängendes Set von Formular-Klassen zum Gestalten von Eingaben, Labels, Feldgruppen und mehr - mit konsistenten Größen, Abständen und Dark-Mode-Unterstützung direkt ab Werk. English: Forms

Wann verwenden

• Baue native HTML-Formulare mit konsistenten Abständen: wickle jedes Control in .velin-field mit sichtbarem .velin-label.
• Gestalte Textfelder mit .velin-input / .velin-textarea; nutze .velin-field-help für Hinweise über aria-describedby.
• Ergänze Validierung und <velin-form-summary>, wenn Nutzer ungültige Daten absenden können.

Wann nicht

• Verwende Platzhaltertext nicht als einziges Label - behalte ein echtes <label for> bei (sichtbar oder .velin-sr-only).
• Erfinde keine Bootstrap-artigen Klassennamen wie .form-control / .btn; VelinStyle verwendet .velin-*-Präfixe.
• Verzichte auf schwebende Labels, wenn ein statisches Label bei langen Formularen oder dichten UIs klarer ist.

Feld-Wrapper - .velin-field

Wickle Label und Eingabe gemeinsam in .velin-field, um konsistente vertikale Abstände und eine korrekte Zuordnung zwischen Label und Control zu erhalten.

<div class="velin-field">
  <label class="velin-label" for="email">Email address</label>
  <input type="email" class="velin-input" id="email" placeholder="you@example.com">
</div>
<div class="velin-field">
  <label class="velin-label" for="password">Password</label>
  <input type="password" class="velin-input" id="password" placeholder="••••••••">
</div>

Labels - .velin-label

Wende .velin-label auf jedes <label> an, um konsistente Schriftstärke, Größe und Abstände zu erhalten. Pflichtfelder können .velin-label--required verwenden.

<label class="velin-label velin-label--required" for="name">Full name</label>
<input type="text" class="velin-input" id="name">

Eingaben - .velin-input

Die Klasse .velin-input liefert konsistentes Styling für Texteingaben. Standard-Controls erfüllen ein Mindestziel von 44px. Dichte entsteht über Layout-Abstände und container-style-Utilities - nicht über separate --sm/--lg-Input-Modifier.

<input type="email" class="velin-input" placeholder="you@example.com">

Hilfetext

Füge mit .velin-field-help kontextuelle Hilfe unter einem Formular-Control hinzu.

<div class="velin-field">
  <label class="velin-label" for="username">Username</label>
  <input type="text" class="velin-input" id="username">
  <small class="velin-field-help">Must be 3-20 characters.</small>
</div>

Vollständiges Formularbeispiel

<form>
  <div class="velin-field">
    <label class="velin-label" for="name">Full name</label>
    <input type="text" class="velin-input" id="name">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="email">Email</label>
    <input type="email" class="velin-input" id="email">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="msg">Message</label>
    <textarea class="velin-input" id="msg" rows="3"></textarea>
  </div>
  <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
</form>

CSS-Variablen

Formular-Controls nutzen CSS Custom Properties für einfaches Theming:

:root {
  --velin-input-bg: #fff;
  --velin-input-color: #212529;
  --velin-input-border-color: #dee2e6;
  --velin-input-border-radius: 0.375rem;
  --velin-input-focus-border-color: #86b7fe;
  --velin-input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
  --velin-input-padding-x: 0.75rem;
  --velin-input-padding-y: 0.375rem;
  --velin-label-font-weight: 500;
}

Barrierefreiheit

• Verbinde jedes Control mit einem Label (for/id oder umschließendes Label).
• Verweise mit aria-describedby auf .velin-field-help und IDs von Fehlertexten.
• Absendevalidierung: Validierung + <velin-form-summary> für aria-invalid.

Verwandt

• Formularsteuerung · Schwebende Labels · Layout
• Validierung · Form Summary
• Barrierefreiheit