Form Komponenten

Es gibt verschiedene Form Elemente. Input Felder, Textarea, Checkboxen, Select Boxen usw..

Index




Passwort Icon ist über A11y erreichbar.
















@
@
@



RAW


















Optionales Legend



Plaintext Ausgabe

Alle Inputs werden ohne Styling ausgegeben. Siehe Bootstrap Forms .

Range und Color haben eine "besondere" Darstellung und sind bisher nicht kompatibel. Ich gehe aber nicht davon aus, dass wir diese jemals bei uns brauchen werden. Daher stecke ich hier keine Mühe rein diese zentriert auszurichten und lasse die Default Darstellung lieber auf Baseline und bin mir sicher, das die anderen (Text) Inputs richtig funktionieren.


Für die Text Plaintext Ausgaben, wird per JS die Länge des Inputs per JS nachjustiert. Dafür ist die __js_plaintext_input__ CSS Klasse notwendig, die in der Komponente automatisch vergeben wird.

Optionales Legend



Validierung verschiedene Inputs

In diesem Test werden manuelle Validierungs Messages unter jedes Form Element gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Optionales Legend
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus



Validierung verschiedene Länge

In diesem Test werden manuelle Validierungs Messages mit verschiedenen Text Längen unter dem Text Input gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec venenatis commodo auctor. Nulla sagittis eu urna et suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec massa quis lorem rutrum convallis. Maecenas fringilla vel felis eget luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut nec
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec venenatis commodo auctor. Nulla sagittis eu urna et suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec massa quis lorem rutrum convallis. Maecenas fringilla vel felis eget luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut nec feugiat mauris. Suspendisse mi diam, imperdiet at diam in, venenatis dignissim sem. Praesent convallis diam nec metus suscipit, ac luctus diam cursus. Duis eget risus sit amet erat eleifend commodo non et enim. Quisque venenatis turpis vitae egestas imperdiet. Sed dictum eros id massa aliquet, at ultrices mauris molestie. Maecenas convallis erat quis quam molestie venenatis. Fusce quis purus ornare, dapibus lectus id, bibendum felis. Nulla facilisi. Suspendisse tempor lorem nec urna aliquet eleifend. Praesent et dapibus est. Donec dignissim vitae ante finibus egestas. Ut convallis sem vel gravida tincidunt. Sed eu vestibulum



Validierung mehrere Nachrichten

In diesem Test werden mehrere manuelle Validierungs Messages mit verschiedenen Text Längen unter dem Text Input gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus



Hilfe Text verschiedene Inputs

In diesem Test werden Hilfe Nachrichten unter jedes Form Element gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Optionales Legend
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus



Hilfe Texte verschiedene Länge

In diesem Test werden Hilfe Nachrichten mit verschiedenen Text Längen unter dem Text Input gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec venenatis commodo auctor. Nulla sagittis eu urna et suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec massa quis lorem rutrum convallis. Maecenas fringilla vel felis eget luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut nec
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat purus, bibendum dictum libero tincidunt sodales. Donec ac metus nec nulla lobortis pharetra. Suspendisse ac nunc eu ante laoreet tincidunt. Nunc quis rhoncus nulla. Nulla non fringilla ligula. Phasellus sollicitudin sem eget felis laoreet accumsan nec id enim. Donec venenatis commodo auctor. Nulla sagittis eu urna et suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec massa quis lorem rutrum convallis. Maecenas fringilla vel felis eget luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut nec feugiat mauris. Suspendisse mi diam, imperdiet at diam in, venenatis dignissim sem. Praesent convallis diam nec metus suscipit, ac luctus diam cursus. Duis eget risus sit amet erat eleifend commodo non et enim. Quisque venenatis turpis vitae egestas imperdiet. Sed dictum eros id massa aliquet, at ultrices mauris molestie. Maecenas convallis erat quis quam molestie venenatis. Fusce quis purus ornare, dapibus lectus id, bibendum felis. Nulla facilisi. Suspendisse tempor lorem nec urna aliquet eleifend. Praesent et dapibus est. Donec dignissim vitae ante finibus egestas. Ut convallis sem vel gravida tincidunt. Sed eu vestibulum



Hilfe Texte mehrere Nachrichten

In diesem Test werden mehrere manuelle Validierungs Messages mit verschiedenen Text Längen unter dem Text Input gerendert. Alle Inputs sind Disabled, damit bei diesen keine Funktionalität getestet wird.

Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales feugiat






Legend

Reset Button hat nur wenige Optionen, da wir hier den Atom Button nicht nutzen können. Sollten mehr Optionen gebraucht werden, muss entweder konzeptionell nochmal drüber geschaut werden, oder on the fly die benötigten Optionen eingefügt werden. Maybe muss der Atom Button noch weiter atomatisiert werden.

In diesem Testcase wird das Formular ohne vorausgewählte Values ausgegeben und dann per JS befüllt, da der Reset Button die Default Werte beim Laden wiederherstellt und nur so es möglich ist, dies ohne extra Eingaben zu testen.