Bootstrap 2

Bootstrap 2

Hinweis: Diese Feature sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.

Auf 3 Anforderungen optimiert

Mit Visforms ist es m├Âglich mehrspaltige Formulare zu erstellen, wenn Sie ein Template verwenden, das mit dem UI-Framework Bootstrap 2.3.2 erstellt ist.

Die Umsetzung dieses UI-Frameworks in Visforms ist im Hinblick auf folgende 3 Anforderungen optimiert:

  • Es soll m├Âglich sein, mit sehr wenig Aufwand ein 2-spaltiges Formularlayout zu erzeugen.
  • F├╝r alle die bereit sind mehr Aufwand zu betreiben, soll es m├Âglich sein, das mehrspaltige Layout sehr individuell zu konfigurieren.
  • Die Steuerung soll mit einer m├Âglichst geringen Anzahl an Parametern direkt in der Konfiguration von Formularen und Feldern erfolgen.

Voraussetzungen

Das mehrspaltige Formular Layout setzt auf das Bootstrap 2.3.2 Grid auf. Sie k├Ânnen also dieses Layout nur verwenden, wenn Ihre Webseite ein Template hat, welches das Bootstrap 2.3.2 Grid umsetzt.

Vorsicht: Wenn Sie nicht sicher sind, ob Ihr Template ein Bootstrap Template ist und wenn ja, welches Bootstrap Grid unterst├╝tzt wird, dann fragen Sie bitte bei Ihrem Template Hersteller nach.

Grundlagen

Das Bootstrap 2.3.2 Grid verwendet die class-Attribute row bzw. row-fluid und die class-Attribute span1, span2, span3span12, um eine Zeile in 1 - 12 Spalten zu unterteilen.

Layout wird reihenweise erzeugt

Dies bedeutet, dass das Layout letztlich Reihenweise erzeugt wird. Jede Reihe wird dann in Spalten unterteilt, die jeweils ein Formularfeld bestehend aus Label und Control enthalten. Die Spalten sind Container, die das Label und das Control enthalten.

In einem zweispaltigen Layout wird der Container f├╝r das 1. Formularfeld in der 1. Zeile in der linken Spalte angezeigt, der Container f├╝r das 2. Formularfeld in der 1. Zeile in der rechten Spalte. Der Container f├╝r das 3. Formularfeld steht in der zweiten Zeile links, und der Container f├╝r das 4. Feld in der zweiten Zeile rechts - und so weiter. F├╝r jede Zeile haben Sie die M├Âglichkeit festzulegen, wie viele Spalten diese enthalten soll. Dies ergibt insgesamt ein extrem flexibles System.

Feld-Container im Grid System

Bootstrap 2 und 3 Grid System

Sie k├Ânnen das mehrspaltige Bootstrap 2 Layout verwenden, um das Design mehrspaltiger Formulare sehr individuell zu konfigurieren. In diesem Fall sollten Sie sich allerdings mit dem Bootstrap Grid System wirklich gut auskennen. Mehr dazu in: Bootstrap Grid System.

Wenn Sie das Bootstrap 2 Layout verwenden, um ein einfaches zweispaltiges Formular zu erzeugen wird es einfacher. In diesem Fall reicht es aus, wenn Sie diesen Artikel aufmerksam durchlesen.

F├╝r welche Formulare eignet sich das mehrspaltige Layout?

Das mehrspaltige Bootstrap 3 Layout eignet sich gut dazu, Formulare zu erstellen, die vor allem Text Input Felder (Feldtypen: Text, E-Mail, Passwort, URL, Zahl) verwenden.

Besonders gut sieht das Design aus, wenn Sie bei diesen Feldern die “Label Optionen” auf “Label verstecken” setzen. Das Label wird dann als Platzhalter im Input angezeigt und verschwindet, wenn der Benutzer anf├Ąngt Eingaben zu machen.

Auch Checkboxen, Listboxen, File Uploads und Textareas passen sich recht gut in das mehrspaltige Layout ein.

Bei Feldern vom Typ Radiobutton oder Checkbox Gruppe kommt das mehrspaltige Layout schnell an seine Grenze. Allerdings k├Ânnen diese meist mit etwas Geschick auch verwendet werden.

Je einheitlicher das Formular, desto besser sieht es im mehrspaltigen Layout aus.

F├╝r welche Formulare eignet sich das mehrspaltige Layout nicht?

Das mehrspaltige Layout funktioniert nicht mit Formularen, die “Bedingte Felder” enthalten. Denn das Ein- und Ausblenden der bedingten Felder wirft das Layout v├Âllig durcheinander. Mehrspaltige Formulare mit bedingten Feldern zu erstellen erfordert Fingerspitzengef├╝hl und viel individuelle Feinjustierung.

Felder mit und Felder ohne Label gleichzeitig innerhalb einer Zeile zu haben, f├╝hrt zu einem uneinheitlichen Layout.

Texte im Formular (benutzerdefinierte Texte der Felder) f├╝hren schnell dazu, dass das mehrspaltige Layout nicht mehr gut aussieht. Ebenso sind Radiobutton und Checkbox Gruppen mit vielen Optionen schwer einzupassen.

Auch f├╝r die Darstellung von Formularen in Modulen ist das mehrspaltige Layout wenig geeignet. Dies, weil die Module in der Regel zu schmal sind.

Hinweis: Bitte beachten Sie, dass sich nicht jedes Formular sinnvoll mehrspaltig darstellen l├Ąsst. Das mehrspaltige Layout kann bei schlechter Konfiguration und/oder unpassenden Feldern einfach "zerbrechen". Sie m├╝ssen es einfach mal ausprobieren, ob es f├╝r ein konkretes Formular gut funktioniert.

Ein einfaches zweispaltiges Formular

Gehen Sie in der Formularkonfiguration auf den Reiter “Erweitert”. Unter der Zwischen├╝berschrift “Layout” finden Sie die Option “UI Framework”. Stellen Sie diese auf “Bootstrap 2”.

Bootstrap 2 Framework Auswahl

Anschlie├čend wird eine Listbox zur Auswahl des “Sublayouts” sichtbar. Stellen Sie diese auf “Individuell”.

Individuelles Sublayout

Allein durch diese Einstellung erreichen Sie, dass nun zwei Formularfelder pro Zeile angezeigt werden. Die beiden Spalten haben die gleiche Breite. Innerhalb des Containers, der ein Feld enth├Ąlt, wird das Label auf eine Breite von 1/3 gesetzt, das Control auf eine Breite von 2/3. Haben Sie die Anzeige des Feld-Labels deaktiviert, nimmt das Control die gesamte Breite ein.

Die Anzahl der Felder pro Spalte bestimmen

Sie k├Ânnen f├╝r jedes Feld festlegen, wie viel Platz ihm innerhalb einer Zeile zugewiesen wird.

Einem Feld Einheiten pro Zeile zuweisen

Gehen Sie hierzu in die Feldkonfiguration auf den Reiter “Erweitert”. Hier finden Sie einen Parameter “Breite”. W├Ąhlen Sie aus der Listbox einen Wert zwischen 1 und 12 aus. Dieser Wert entspricht der Anzahl an Einheiten, die diesem Feld in seiner Zeile zugewiesen werden. Da jede Zeile aus 12 Einheiten besteht bedeutet dies, dass das Feld bei einem Wert von 4 1/3 der Zeile einnimmt, bei einem Wert von 6 die H├Ąlfte der Zeile bei einem Wert von 12 die ganze Zeile.

Individuelle Spaltenanzahl

Zeile nicht immer ganz gef├╝llt

Visforms berechnet automatisch f├╝r jedes Feld, ob es aufgrund seiner gew├Ąhlten Breite noch in die aktuelle Zeile passt oder nicht. Passt es nicht mehr hinein, wird automatisch eine neue Zeile angefangen. Es ist also auch m├Âglich, dass eine Zeile aufgrund der gew├Ąhlten Feld-Breiten, nicht vollst├Ąndig gef├╝llt wird.

Hier ein Beispiel:
Feld1 hat Breite 5, Feld2 hat Breite 5, Feld3 hat Breite 3.
Feld 3 wird folglich in eine neue Zeile geschrieben (13 = 5 + 5 + 3 > 12).
In der 1. Zeile sind daher nur 10 von 12 Einheiten gef├╝llt.

Die Breite von Label und Control ver├Ąndern

Sie k├Ânnen f├╝r jedes Feld steuern, wie viel Platz dem Label und wie viel Platz dem Control innerhalb des Feld-Containers zugewiesen wird. Dies geschieht ├╝ber die Feld-Parameter “CSS Klasse f├╝r Bezeichnung” und “CSS Klasse des Feldes” unter dem Reiter “Erweitert” in der Feldkonfiguration.

Hinweis: Vergessen Sie das notwendige Leerzeichen vor dem eigentlichen CSS-Klassen-Namen nicht.

F├╝gen Sie den Wert " spanx” als CSS-Klassen-Namen in diese Parameter ein, wobei Sie “x” mit einer Zahl zwischen 1 und 12 ersetzen m├╝ssen.

Zahlenwerte zu 12 addieren

Angenommen im Formular werden f├╝r das Feld Label und Control angezeigt. Dann sollten sich die Zahlenwerte zu 12 addieren, die an das “span” f├╝r Label und Control angeh├Ąngt werden.

Prinzipiell k├Ânnen Sie aber auch jeden beliebigen anderen Wert verwenden.

Dies hat allerdings unter Umst├Ąnden zur Folge, dass Label und Control den Feld-Container nicht ganz ausf├╝llen.
Das kann passieren, wenn die Summe kleiner ist als 12.

M├Âglich ist auch, dass es zu einem Zeilenumbruch zwischen Label und Control kommt.
Das kann passieren, wenn die Summe gr├Â├čer ist als 12.

Zeilenumbruch zwischen Label und Control

Bei manchen Feldtypen wie etwa der Textarea, kann es sinnvoll sein, einen Zeilenumbruch zwischen Label und Control zu erzwingen. Das kann sinnvoll sein, weil das Feld dann insgesamt besser ins mehrspaltige Layout passt. Sehen Sie auch weiter unten: Textarea.

Fehlende Eingaben werden sinnvoll erg├Ąnzt

Visform versucht so weit als m├Âglich, fehlende Eingaben in sinnvoller Weise zu erg├Ąnzen und fehlerhafte Eingaben bei den CSS Klassen in sinnvoller Weise zu korrigieren. Fehlerhafte Eingaben f├╝hren in der Regel dazu, dass auf die Defaultwerte zur├╝ckgestellt wird. Das Label hat span4 und das Control hat span8 als Defaultwert. Fehlende Eingaben werden so erg├Ąnzt, dass Label und Control zusammen den gesamten Platz einnehmen.

Fehlerhafte Werte sind

  • span0,
  • span13 oder
  • mehr als ein spanx f├╝r Label oder Control.

Spezielle Feldtypen

Datum

Aufgrund des Kalender-Icons ist die saubere Platzierung von Datumsfeldern im mehrspaltigen Layout schwierig. Am besten ist es, nur die Option “Breite” f├╝r die Breite des Feld-Containers zu setzen und keine span-Werte zu vergeben. Setzen Sie die Breite vorzugsweise auf 12, sodass das Datumsfeld allein in einer eigenen Zeile im Formular steht. Das Label wird dann immer oberhalb des Controls angezeigt.

Auch eine Platzierung von zwei Datumsfeldern in einer Zeile sieht im Layout gut aus. F├╝r jedes der beiden Datumsfelder ist die Option “Breite” dann auf 6 zu setzen.

Radios und Checkbox Gruppen

Das Setzen von span Werten f├╝r die Optionen “CSS Klasse f├╝r Bezeichnung” und “CSS Klasse des Feldes” f├╝hrt bei Radiobuttons und Checkbox Gruppen zu fehlerhaften Darstellungen. Wenn Sie f├╝r Radiobuttons oder Checkbox Gruppen die Option “Anzeige” auf “Inline” stellen, ist es sinnvoll die “Breite” des Feld-Containers auf 12 zu setzen. Damit erhalten die Buttons und Checkboxen ausreichend viel Platz.

Setzen Sie die Option “Anzeige” auf “Als Liste”, k├Ânnen Sie unter Umst├Ąnden auch zwei oder mehr Felder vom Typ Radiobutton oder Checkbox in einer Zeile platzieren. Setzen Sie hierf├╝r die Option “Breite” aller Felder auf den entsprechenden Wert: Breite 6 f├╝r 2 Felder, Breite 4 f├╝r 3 Felder in einer Zeile.

Checkbox

Checkboxen lassen sich problemlos im mehrspaltigen Layout verwenden. Allerdings sollte hier nur die Option “Breite” eingestellt werden und keine span Werte vergeben werden.

Textarea

Textareas lassen sich gut ins mehrspaltige Layout einpassen.

Hinweis: Vergessen Sie das notwendige Leerzeichen vor dem eigentlichen CSS-Klassen-Namen nicht.

Folgende Einstellungen sind sinnvoll:

  • “Breite”: 12
    Hierdurch nimmt das Textarea-Feld die gesamte Breite des Formulars ein.
  • “CSS Klasse f├╝r Bezeichnung”: " span12”
    Hierdurch wird das Label ├╝ber dem Eingabefeld positioniert.
  • “CSS Klasse des Feldes”: " span12”
    Hierdurch nimmt das Eingabefeld die gesamte Breite des Feldcontainers ein.

Haben Sie in Ihrem Formular zwei oder mehr Textarea-Felder hintereinander, so k├Ânnen Sie diese durch andere Werte der Option “Breite” auch in einer Zeile anzeigen.

File Upload

Felder vom Typ “File Upload” k├Ânnen wie Felder vom Typ Text einfach ├╝ber alle drei Optionen konfiguriert werden.

Feldtrenner

Feldtrenner, sogar mit benutzerdefiniertem Text, k├Ânnen mit etwas Fingerspitzengef├╝hl ebenfalls in ein mehrspaltiges Layout eingepasst werden. Setzen Sie immer die “CSS Klasse des Feldes” auf " span12” (das f├╝hrende Leerzeichen nicht ├╝bersehen).

Buttons

Die Einstellungen f├╝r mehrspaltiges Layout werden f├╝r die Buttons Feld-Typen (Submit, Reset, Image Submit) nicht ausgewertet. Alle Button werden ohnehin in allen Layouts nebeneinander in einer Zeile platziert.