BreezingForms – Teil 3

Die allgemeinen Formulareinstellungen wurden bereits definiert. Und auch das erste Feld – inklusive der Feldbezeichnung – haben Sie schon angelegt. In diesem Tutorial geht es nun mit anderen Feldern weiter. Im Fokus stehen dieses Mal Radioboxen, Auswahlfelder und Checkboxen.

Wir empfehlen:
Joomla!-Training

Beim Anlegen des Feldes Vorname gibt es im Vergleich zu dem bereits vorhandenen Nachname-Feld keine Unterschiede. Nachdem die beiden Felder Vorname und Nachname angelegt wurden, geht es jetzt um das Geschlecht-Feld. Darüber sollen die Benutzer angeben können, ob sie männlich oder weiblich sind. Die Besonderheit der Radioboxen ist, dass man normalerweise – zumindest im eigentlichen Sinn – immer nur eine Option auswählen kann. So können Benutzer also beispielsweise angeben, ob sie eine Frau oder ein Mann sind.
Um eine Radiobox anzulegen, rufen Sie über die Werkzeugleiste Neu auf und wählen unter Eingaben die Option Radioknopf. Mit Weiter gelangt man zur nun schon bekannten Konfiguration des Feldes.

Zunächst soll das Feld Mann angelegt werden. Wichtig ist vor allem das Feld Name.

Dort tragen Sie im aktuellen Beispiel geschlecht ein. Exakt der gleiche Name muss dann anschließend auch beim Frau-Feld verwendet werden. Denn nur dann gehören die beiden Felder zur gleichen Gruppe. Und nur wenn sie der gleichen Gruppe angehören, ist gewährleistet, dass man jeweils nur eine Option auswählen kann.

Wichtig ist zudem das Feld Beschriftung. Der hier vergebene Wert wird im Frontend vor dem Feld angezeigt.

Genauso wie das Mann-Feld angelegt wurde, erzeugen Sie auch das Frau-Feld. Ein anschließender Blick in die Layoutansicht liefert folgendes Ergebnis:

Anders als bei einfachen Eingabefeldern muss man bei Radioboxen keine zusätzliche Beschriftung über ein statisches Feld einfügen. Das wird bei Radioboxen mittels des Beschriftung-Feldes, das während des Anlegens der Radiobox mit Inhalt gefüllt wird, erledigt.

Auswahlfelder anlegen
Eine ebenfalls öfters benötigte Feldart sind Auswahlfelder. Im Beispielformular soll darüber das Anliegen der Kontaktaufnahme ausgewählt werden. Um dieses Feld anzulegen, klicken Sie in der Werkzeugleiste auf Neu und aktivieren im Bereich Eingaben die Option Auswahlliste.

Mit Weiter werden die Einstellungen übernommen. Interessant ist jetzt zunächst einmal die Option Mehrfachauswahl. Über diese kann man nämlich festlegen, ob aus dem Feld mehrere Einträge ausgewählt werden dürfen. Die eigentlichen Auswahlmöglichkeiten werden in das Optionen-Feld eingetragen. Hier zunächst ein Beispiel, wie diese Einträge typischerweise aussehen:

1;Ihr Anliegen;''
0;Anfrage;anfrage
0;Bestellung;bestellung
0;Support;support

Wie unschwer zu erkennen ist, folgt die Syntax immer dem gleichen Schema. Zunächst einmal hat man die Wahl zwischen einer vorangestellten 1 und einer 0. Durch den Wert 1 wird der Standardeintrag festgelegt. Dieser Wert wird als Voreinstellung des Feldes angezeigt. Das ist auch der Grund, warum man die 1 lediglich einmal verwenden sollte.

Der hinter dem Semikolon stehende Wert ist derjenige, der dem Besucher im Auswahlfeld angezeigt wird. Nach einem weiteren Semikolon wird der interne Feldwert bestimmt. Dieser Wert wird dem value-Attribut des option-Elements zugewiesen. Der im Frontend generierte Quellcode sieht dann beispielsweise folgendermaßen aus:

<option value="anfrage">Anfrage</option>

Hier sehen Sie noch einmal den Zusammenhang zwischen der Syntax im Verwaltungsbereich der BreezingForms und der Ausgabe im Frontend.

Angelegt wird das Auswahlfeld abschließend mit Speichern. In der Entwurfsansicht lässt es sich dann an der gewünschten Stelle platzieren.

Checkboxen
Auch Checkboxen werden Ihnen immer wieder begegnen. Ein typisches Einsatzszenario für diesen Feldtyp ist die Frage, ob die Besucher einen Newsletter abonnieren wollen. Um eine Checkbox anzulegen, klicken Sie wie üblich in der Werkzeugleiste auf Neu. Interessant ist im Bereich Eingaben der Wert Ankreuzfeld.

Nachdem Sie diese Option gewählt haben, bestätigen Sie diese Einstellung mit Weiter. Wie üblich weisen Sie dem Feld für interne Zwecke einen Titel und einen Namen zu. Interessant ist darüber hinaus die Option Angekreuzt. Wählt man hier Ja, ist die Checkbox im Frontend standardmäßig angekreuzt bzw. aktiviert. Diese Option entspricht dem checked-Attribut des input-Elements.

Über die Option Typ kann man festlegen, ob die Checkbox aktiv oder inaktiv sein soll. Setzt man den Wert auf Deaktiviert, wird dem input-Element der Wert disabled zugewiesen. Wurde eine auf diese Weise gekennzeichnete Checkbox bei Angekreuzt auf Ja gesetzt, kann diese vom Anwender nicht mehr deaktiviert werden. (Gleiches gilt natürlich auch im umgekehrten Fall.)

In das Feld Wert tragen Sie den internen Bezeichner der Checkbox ein. Dieser Wert wird dem name-Attribut des input-Elements zugewiesen.
Und zu guter Letzt gibt es da noch das Feld Anschrift, bei dem die Übersetzung nicht so recht passen will. Aber wie auch immer: Der in dieses Feld eingetragene Wert wird vor der Checkbox angezeigt. Mit Speichern werden die Einstellungen übernommen.

Versteckte Eingabefelder
Ein weiterer Elementtyp sind die versteckten Eingabefelder. Jetzt könnte man sich natürlich die Frage stellen, warum man sein Formular mit unsichtbaren Eingabefeldern ausstatten soll. Interessant ist dieser Feldtyp hauptsächlich daher, da diese Felder Daten enthalten können, die mit dem Formular übertragen werden. Diese Daten können dann per Skript oder Programm ausgelesen und weiterverarbeitet werden.  

Felder für den Datei-Upload
Interessant ist auch der Feldtyp Datei Upload.

Darüber kann man den Benutzern die Möglichkeit geben, Dateien mit dem Formular mitzuschicken. Hier ist natürlich Vorsicht geboten. Schließlich könnten die Benutzer auch verseuchte Daten senden. Es gilt also Sicherheitsvorkehrungen zu treffen. So sollte man über Max Dateigrösse die Dateigröße angeben, die von Benutzern maximal übertragen werden darf. Erwartet wird ein Byte-Wert. Dabei entspricht die Voreinstellung 2000000 knapp 2 MByte.

Während diese Option eher dazu gedacht ist, Speicherplatz zu sparen, geht es im Feld Erlaubte Mime Typen darum, welche Dateitypen auf den Server geladen werden dürfen. Standardmäßig ist lediglich der Wert text/*,application/zip enthalten. Das bedeutet, dass man Textdateien und Zip-Archive übertragen kann. Je nach dem, welche Dateitypen Sie noch wollen, können Sie diese Liste erweitern. Dabei muss jeder Mime-Type durch Kommata vom Vorgängerwert getrennt notiert werden. Eine gute Übersicht der verfügbaren Mime-Typen finden Sie beispielsweise unter http://de.selfhtml.org/diverses/mimetypen.htm. Achten Sie auf alle Fälle darauf, dass gemeinhin als gefährlich eingestufte Mime-Typen nicht in der Liste auftauchen. (Das gilt beispielsweise für exe-Dateien u.ä.)

Fazit
Auch dieses Tutorial hat es wieder gezeigt: Die Möglichkeiten, die BreezingForms bietet, sind sehr vielfältig. Das bedeutet natürlich auch, dass man sich tatsächlich nach und nach in den Umgang mit dieser Erweiterung einarbeiten muss. In den nächsten Tutorials wird das Beispielformular weiter ausgebaut.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training