Wie verwende ich Formanizr?
Auf dieser Dokumentations-Seite wird beschrieben wie Du den Formanizr in Deine Seite einbinden kannst und vor allem welche Optionen Dir dabei zur Verfügung stehen.
In den meisten Beispielen auf dieser Dokumentations-Seite sind der Einfachheit halber Text-Eingabefelder (‹input type="text" /›) verwendet worden, an dieser Stelle können natürlich auch alle anderen Formular-Elemente verwendet werden.
Benötigte Datei(en) einbinden
Zu aller erst müssen die entsprechenden Formanizr CSS-Dateien im ‹head› der HTML Seite eingebunden werden.
Formanizr initialisieren
Um Formanizr auf Deine Form-Elemente anwenden zu können muss ein HTML-Elternelement die CSS-Klasse formanizr aufweisen. Hierbei ist es egal um welches HTML-Tag es sich handelt (div, section, form, etc.).
Alle weiteren Formanizr-spezifischen CSS-Klassen die innerhalb dieses formanizr-Containers verwendet werden haben den Prefix fzr_.
Optionale Styles für den Formanizr-Container
Auf der Formanzir-Ebene kann man weitere, optionale Einstellungen vornehmen.
Mögliche Optionen:
- Theme (fzr_theme-dark)
- Schriftgröße (fzr_tiny, fzr_normal (default) oder fzr_big)
- Positionierung Legend (fzr_legend-inside)
- Positionierung Label (fzr_right und/oder fzr_label-top)
Die Positionierung der Labels kann auch separat pro Label oder Row erfolgen. - Label(s) fett (fzr_label-bold), gilt nicht für Labels innerhalb von fzr_inline
Auch diese Anweisung kann separat auf diversen Elementen erfolgen (Label, Row, etc.)
Aufbau des Form-Grids
Das für Fomranizr verwendete Grid besteht aus 12 Spalten. Das Form-Grid ist flexibel, das heisst es passt sich automatisch der Breite des umgebenden Elementes an.
Eine Formular-Reihe (fzr_row) beinhaltet also bis zu maximal 12 Spalten (fzr_col). Diese einzelnen Spalten können, wie bei CSS-Grid-Systemen üblich, unterschiedliche Breiten haben. Diese Breite wird einfach mit einer zusätzlichen Klasse (fzr_1, fzr_2, fzr_3 bis fzr_12) gesetzt. Für ein korrektes Layout sollte eine Reihe nicht mehr als 12 Spalten-Einheiten enthalten.
Nachfolgend einige Beispiele mit dem dazugehörigen HTML-Schnipsel um das Ganze zu verdeutlichen:
Formular-Reihe (fzr_row) mit 4 gleich großen Spalten
Formular-Reihe (fzr_row) mit 4 unterschiedlich großen Spalten
Formular-Reihe (fzr_row) mit 3 unterschiedlich großen Spalten
Aufbau des Formulars
Je nachdem ob man die Labels (Bezeichner) der Formular-Elemente darüber oder davor anzeigen möchte, muss man das HTML entsprechend aufbereiten und überlegen wie man sein Grid aufbaut. Der Aufbau der einzelnen Reihen (fzr_row) ist hierbei natürlich voneinander unabhängig.
Labels über dem Formular-Element darstellen (fzr_label-top)
Labels neben den Formular-Element darstellen (links- und/oder rechtsbündig)
Inline-Elemente (‹input type="radio" /› und ‹input type="checkbox" /›)
Die Inline-Elemente für Radio-Buttons und Checkboxen müssen in einem zusätzlichen Container fzr_inline verschachtelt werden.