BaseGUI.de

Formulare sind einer der Bereiche, wo Frameworks wirklich helfen. Labels müssen klar zugeordnet sein, Inputs sollen genug Höhe haben, und Fehlermeldungen dürfen nicht wie ein Fremdkörper wirken. Die Component-Schicht fasst das zusammen und macht daraus ein wiederholbares Muster. Das ist nicht glamourös, aber es spart dir extrem viel Nacharbeit, vor allem wenn später neue Felder dazu kommen.

<form action="#" method="post">
  <label for="email">E-Mail</label>
  <input id="email" name="email" type="email" placeholder="name@domain.de">

  <label for="msg">Nachricht</label>
  <textarea id="msg" name="msg" rows="4"></textarea>

  <button class="btn primary" type="submit">Senden</button>
</form>

Grundregeln für Form Components

Ein Framework setzt Inputs auf einen Nenner: Border, Padding, Fokus-Zustand, und Abstände zwischen Feldern. Wichtig ist, dass du HTML nicht kaputt stylst. Labels bleiben Labels. Wenn du daraus Div-Bausteine machst, wird es bei Accessibility schnell schwierig. Ein gutes Framework ist hier eher langweilig, aber zuverlässig. Und es ist besser, wenn ein Formular „normal“ aussieht, als wenn es fancy ist, aber niemand weiß, wo man klicken soll.

input, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #c8ccd1;
  border-radius:10px;
  font:inherit;
}
label{ display:block; margin:10px 0 6px 0; }

Forms gehören zu Components, weil sie sichtbar sind, Zustände haben und interagieren. Base und Content liefern nur das Fundament. Objects regeln Layout. Die Form-Component bringt Details zusammen und sorgt dafür, dass ein Formular auf Seite eins genauso wirkt wie auf Seite zwölf. Wenn das fehlt, sieht jede Seite etwas anders aus und es wirkt unproffessionell, obwohl es technisch läuft. Das ist so ein typischer Punkt, den man erst bemerkt, wenn ein Kunde drauf schaut.