Wie lassen sich Formulare mit Registerlaschen-Containern strukturieren?

Formulare können über Container wie den „Registerlaschen-Container“ strukturiert werden. Für die Umsetzung empfiehlt sich das Zusatzmodul „Formular-Editor“, mit dem die Arbeit über Struktureditor und Formularmasken besonders komfortabel erfolgt. Alternativ kann die Umsetzung auch mit dem Formular-Element „Container mit Inhaltselementen“ sowie über mehrspaltige Inhaltscontainer erfolgen.

Welche Rolle spielt der Formular-Editor bei der Umsetzung?

Der „Formular-Editor“ ermöglicht die Umsetzung des Formulars „rein mit Bordmitteln“. Dabei wird mit dem Struktureditor und den Formularmasken gearbeitet, um die gewünschten Container und Formularelemente strukturiert in den Registerlaschen zu verteilen.

Wie verteile ich Formularelemente in den Registerlaschen?

Platzieren Sie innerhalb des „Container mit Inhaltselementen“ weitere Inhaltselemente (z. B. eine Inhaltsbox). Nutzen Sie außerdem den „Container mit Formularelementen“, um die gewünschten Formularelemente so zu verteilen, dass sie in den Registerlaschen erscheinen.

Kann ich Formularfelder abhängig von anderen Werten ein- oder ausblenden?

Ja. Das Element „Bedingter Container mit Formularelementen“ ermöglicht ein bedingtes Einblenden von Formular-Elementen abhängig von bestimmten Werten anderer Formular-Elemente.

Wie kann ich Pflichtfelder (Validator) sichtbar bei ungültigen Registerlaschen kennzeichnen?

Wenn Registerlaschen abhängig von Pflichtfeldern (Validator) als ungültig kenntlich gemacht werden sollen, können Sie dies durch Anpassungen in design.js und per CSS realisieren. Beispielhaft wird in design.js bei Elementen mit data-isinvalid="1" eine Klasse containsInvalidInputs an den zugehörigen Container gesetzt. In additional.scss kann diese Klasse dann z. B. mit roter Hintergrund- und Textfarbe formatiert werden.

Wird die Kennzeichnung ungültiger Felder über ein bestimmtes Datenattribut angesteuert?

Ja. Im Beispiel wird geprüft, ob ein Element das Attribut data-isinvalid="1" trägt. Für diese Elemente wird der nächstgelegene .container-Bereich ermittelt, entsprechend markiert und per Klasse visuell hervorgehoben.

Wie setze ich eine ähnliche Struktur statt mit Registerlaschen über andere Container um?

Zusätzlich zum Registerlaschen-Ansatz können Sie die gleiche Logik auf ähnliche Weise über das Formular-Element „Container mit Inhaltselementen“ umsetzen. Alternativ eignet sich auch ein mehrspaltiger Inhaltscontainer, um die Formulare in mehrere Bereiche zu strukturieren.

Gibt es eine wichtige Regel bei verschachtelten Bedingungen?

Ja. Wichtig ist: Verschachtelte Bedingungen sollten sich nicht darauf verlassen, dass eine äußere Bedingung/ Auswahl bereits gesetzt ist. Bei inneren Bedingungen sollte die äußere Bedingung immer nochmals mit abgefragt werden.

Wo finde ich Hinweise zur Umsetzung mit mehrspaltigen Containern?

Die Seite zeigt ein Beispiel zur Umsetzung mit einem mehrspaltigen Inhaltscontainer, inkl. Screens (Seitenansicht). Zusätzlich wird dort die genannte Regel zu verschachtelten Bedingungen hervorgehoben.

Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert

Startseite

Veröffentlichungsdatum: 21. Juni 2021
Änderungsdatum: 17. März 2023

weblication cms formular container registerlaschen akkordeon tabs spalten strukturieren aufteilen

Formulare lassen sich über Container wie z.B. den Registerlaschen-Container strukturieren.

Formular mit Registerlaschen-Container (Seitenansicht)

Zur Umsetzung empfehlen wir das Zusatzmodul Formular-Editor, über welches komfortabel über den Struktureditor und die Formularmasken gearbeitet werden kann. Das folgende Beispiel führt auf Grundlage der BASE (Mobile First) eine Umsetzung eines Formulares mit Verwendung eines Registerlaschen-Containers an. Sie können dies natürlich auf ähnliche Weise über das Formular-Element "Container mit Inhaltselementen" auch über den mehrspalten Inhaltscontainer über Spalten umsetzen.

Formularumsetzung mit Registerlaschen-Container

Mit dem Formular-Editor lässt sich die Umsetzung rein mit Bordmitteln realisieren.

Fügen Sie dazu in einer Seite zuerst ein Formular-Element über den Struktureditor ein. Als erstes Element im Formular fügen Sie das Strukturelement "Container mit Inhaltselementen" ein und können darin z.B. den "Container mit Inhaltselementen" einfügen.

Darin können Sie weitere Inhaltselemente (z.B. eine Inhaltsbox o.ä.) platzieren und auch mit dem "Container mit Formularelementen" arbeiten, um die gewünschten Formulare innerhalb der Registerlaschen zu verteilen.

Zusätzlich ermöglicht das Element "Bedingter Container mit Formularelementen" ein bedingtes Einblenden von Formular-Elementen abhängig von bestimmten Werten anderer Formular-Elemente.

Sofern die Registerlaschen abhängig von Pflichtfeldern (Validator) kenntlich gemacht werden sollen, können Sie dies durch eine Ergänzung in der design.js und per CSS z.B. wie folgt realisieren.

Beispiel: Auszug aus design.js

// ...

////////////////////////////////////////////////////////////////
//
// Initialisieren der Seite
//
////////////////////////////////////////////////////////////////

jQuery(document).ready(function(){

  // ...

  jQuery('*[data-isinvalid="1"]').each(function(){
    jQuery('#tab_' + jQuery(this).closest('.container').addClass('containsInvalidInputs').attr('id').replace(/^container_/,'')).addClass('containsInvalidInputs');
  });

});

Beispiel: Auszug aus additional.scss

/* Ergänzende Styles */

.containsInvalidInputs {
  background-color: rgba(251,0,8,0.3) !important;
  color: #FB0008 !important;
}

/* ... */

Formularumsetzung mit mehrspaltigem Container

Ein Beispiel mit einem mehrspaltigem Inhaltscontainer zeigen die nachfolgenden Screens auf.

Formular mit mehrspaltigem Container (Seitenansicht)

Wichtig
Verschachtelte Bedingungen sollten sich nicht darauf verlassen, daß eine Bedingung bzw. Auswahl weiter oben gesetzt ist. Man sollte bei inneren Bedingungen die äussere immer auch nochmals mit abfragen.

Weiterführende Links

Online-Doku: Formular-Editor / Kontakt-Formular

Anwendungsbeispiel: Formular über mehrere Seiten mit Übergabe der Werte über Session

FAQs are only visible for Weblication ai search and editors!

Wie lassen sich Formulare mit Registerlaschen-Containern strukturieren?: Formulare können über Container wie den „Registerlaschen-Container“ strukturiert werden. Für die Umsetzung empfiehlt sich das Zusatzmodul „Formular-Editor“, mit dem die Arbeit über Struktureditor und Formularmasken besonders komfortabel erfolgt. Alternativ kann die Umsetzung auch mit dem Formular-Element „Container mit Inhaltselementen“ sowie über mehrspaltige Inhaltscontainer erfolgen.
Welche Rolle spielt der Formular-Editor bei der Umsetzung?: Der „Formular-Editor“ ermöglicht die Umsetzung des Formulars „rein mit Bordmitteln“. Dabei wird mit dem Struktureditor und den Formularmasken gearbeitet, um die gewünschten Container und Formularelemente strukturiert in den Registerlaschen zu verteilen.
Wie starte ich die Formularerstellung mit dem Struktureditor?: Fügen Sie zunächst in einer Seite ein Formular-Element über den Struktureditor ein. Fügen Sie als erstes Element im Formular das Strukturelement „Container mit Inhaltselementen“ ein und verwenden Sie dieses als Grundlage, um weitere Inhalte und Formularteile innerhalb der Struktur zu platzieren.
Wie verteile ich Formularelemente in den Registerlaschen?: Platzieren Sie innerhalb des „Container mit Inhaltselementen“ weitere Inhaltselemente (z. B. eine Inhaltsbox). Nutzen Sie außerdem den „Container mit Formularelementen“, um die gewünschten Formularelemente so zu verteilen, dass sie in den Registerlaschen erscheinen.
Kann ich Formularfelder abhängig von anderen Werten ein- oder ausblenden?: Ja. Das Element „Bedingter Container mit Formularelementen“ ermöglicht ein bedingtes Einblenden von Formular-Elementen abhängig von bestimmten Werten anderer Formular-Elemente.
Wie kann ich Pflichtfelder (Validator) sichtbar bei ungültigen Registerlaschen kennzeichnen?: Wenn Registerlaschen abhängig von Pflichtfeldern (Validator) als ungültig kenntlich gemacht werden sollen, können Sie dies durch Anpassungen in <code class="codeInline">design.js</code> und per CSS realisieren. Beispielhaft wird in <code class="codeInline">design.js</code> bei Elementen mit <code class="codeInline">data-isinvalid="1"</code> eine Klasse <code class="codeInline">containsInvalidInputs</code> an den zugehörigen Container gesetzt. In <code class="codeInline">additional.scss</code> kann diese Klasse dann z. B. mit roter Hintergrund- und Textfarbe formatiert werden.
Wird die Kennzeichnung ungültiger Felder über ein bestimmtes Datenattribut angesteuert?: Ja. Im Beispiel wird geprüft, ob ein Element das Attribut <code class="codeInline">data-isinvalid="1"</code> trägt. Für diese Elemente wird der nächstgelegene <code class="codeInline">.container</code>-Bereich ermittelt, entsprechend markiert und per Klasse visuell hervorgehoben.
Wie setze ich eine ähnliche Struktur statt mit Registerlaschen über andere Container um?: Zusätzlich zum Registerlaschen-Ansatz können Sie die gleiche Logik auf ähnliche Weise über das Formular-Element „Container mit Inhaltselementen“ umsetzen. Alternativ eignet sich auch ein mehrspaltiger Inhaltscontainer, um die Formulare in mehrere Bereiche zu strukturieren.
Gibt es eine wichtige Regel bei verschachtelten Bedingungen?: Ja. Wichtig ist: Verschachtelte Bedingungen sollten sich nicht darauf verlassen, dass eine äußere Bedingung/ Auswahl bereits gesetzt ist. Bei inneren Bedingungen sollte die äußere Bedingung immer nochmals mit abgefragt werden.
Wo finde ich Hinweise zur Umsetzung mit mehrspaltigen Containern?: Die Seite zeigt ein Beispiel zur Umsetzung mit einem mehrspaltigen Inhaltscontainer, inkl. Screens (Seitenansicht). Zusätzlich wird dort die genannte Regel zu verschachtelten Bedingungen hervorgehoben.