1. Docs
2. Formulare
3. Layout

Formular-Layout 1.2.0

Kombiniere VelinStyles Grid-System und Utility-Klassen, um jedes Formularlayout zu bauen - von gestapelten Feldern bis zu mehrspaltigen und Inline-Formularen. English: Form Layout

Wann verwenden

• Stapele Felder mit .velin-field für den standardmäßigen vertikalen Rhythmus.
• Mehrspaltige Adress-/Namensgruppen mit .velin-row, Gutters (.velin-g-3) und responsiven Spalten (.velin-md-col-6).
• Kurze Inline-Filter oder Login-Zeilen mit Flex-Utilities - halte Labels verknüpft.

Wann nicht

• Kopiere keine Bootstrap-Klassennamen wie .row / .col-md-* - verwende VelinStyles .velin-row / .velin-md-col-*.
• Opfere die Label-Zuordnung nicht für ein kompaktes Inline-Layout.
• Sehr lange Wizards brauchen eher ein Stepper-Pattern als ein dichtes Grid.

Gestapelt (Standard)

Felder innerhalb eines <form> werden standardmäßig mit .velin-field-Abständen vertikal gestapelt.

<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>
  <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
</form>

Grid-Layout

Nutze .velin-row und responsive .velin-md-col-*-Klassen, um mehrspaltige Formularlayouts zu erstellen.

<form>
  <div class="velin-row velin-g-3">
    <div class="velin-md-col-6">
      <div class="velin-field">
        <label class="velin-label">First name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="velin-md-col-6">
      <div class="velin-field">
        <label class="velin-label">Last name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="velin-col-12">
      <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
    </div>
  </div>
</form>

Inline-Formular

Nutze Flex-Utilities, um Controls nebeneinander in einer Zeile zu platzieren.

<form class="velin-flex velin-flex--wrap velin-flex--gap-2 velin-flex--items-end">
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Email</label>
    <input type="email" class="velin-input">
  </div>
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Password</label>
    <input type="password" class="velin-input">
  </div>
  <button type="submit" class="velin-btn velin-btn--primary">Sign in</button>
</form>

Barrierefreiheit

• Die Lesereihenfolge sollte der visuellen Reihenfolge entsprechen - vermeide CSS-Umsortierungen von Spalten, die die DOM-Reihenfolge brechen.
• Inline-Formulars still need a label per control (visible or .velin-sr-only).
• Platziere beim Absenden <velin-form-summary> am Anfang des Formulars, damit der Fokus zuerst auf der Fehlerliste landet.

Verwandt

• Grid · Gutters · Stacks
• Formulare Überblick · Validierung