Formular

Um eine konsistente visuelle Ästhetik der Auswahlfelder zu gewährleisten sind die Klassen form und needs-validation im Formular HTML Tag notwendig. Die Klasse form sorgt für die korrekte Darstellung der Formularelemente, während needs-validation die korrekte Darstellung der Validierung ermöglicht. Da eine individuelle Gestaltung der Validierung gegeben ist, werden die standardmäßigen Feedback-Tooltips des Browsers mithilfe des Attributs novalidate deaktiviert.

Ein Formular muss abschließend einen Primary Button zum Absenden der Daten enthalten. Dieser Button löst die Validierung des Formulars aus und ist somit für die korrekte Darstellung der jeweiligen Zustände der einzelnen Formularfelder unerlässlich.

Alternativ kann auch eine Button Gruppe verwendet werden, um die primäre Aktion hervorzuheben und eine sekundäre Aktion anzubieten.

<form class="form needs-validation" novalidate>

  <!-- Eingabefelder -->

  <button class="btn btn-primary" type="submit">Absenden</button>

  <!-- Alternativ: Button Gruppe -->
  <div class="button-group">
    <a class="btn btn-link" href="#">Tertiäre Aktion</a>
    <a class="btn btn-secondary" href="#">Sekundäre Aktion</a>
    <button class="btn btn-primary" type="submit">Primäre Aktion</button>
  </div>

</form>

Eingabefelder

Einzelne Eingabefelder passen sich automatisch der Breite ihres Containers an und sollen entweder die volle oder 3/4 Breite einnehmen. Für kürzere Informationen wie die PLZ, Geburtsdatum oder Anrede ist die halbe Breite vorgesehen. Für eine korrekte Darstellung müssen daher Container verwendet werden.
Zur Kennzeichnung von Pflichtfeldern wird auf die Verwendung von * verzichtet. Stattdessen werden optionale Felder direkt nach dem Label durch die Ergänzung von ‚(optional)‘ gekennzeichnet.