Im Css-Bereich kann über Css-Selektoren auf Formularelemente zugegriffen werden und ihre Darstellung entsprechend angepasst werden. Im JavaScript-Bereich wird das Framework jQuery verwendet, welches Css-Selektoren mit einigen Erweiterungen verwendet. Über Selektoren kann auch mit JavaScript auf Formularelemente zugegriffen werden.

Weitere Informationen zu Css und weiterführende Links sind im Abschnitt zum Css-Bereich zu finden.

Weitere Informationen zu jQuery und weiterführende Links sind im Abschnitt zum JavaScript-Bereich zu finden.

Im Folgenden wird erklärt, wie Formularelemente mit Selektoren ausgewählt werden können und welche speziellen Selektoren es bei Formularen von FORMCYCLE gibt. 

Inhalt

Attributselektoren bei der Formularerstellung

Attributselektor data-name

Besonders im JavaScript wird häufig auf ein Formularelement mit einem bestimmten Namen zugegriffen. Dazu kann folgender Selektor verwendet werden:

$("[data-name='element']") // mittels jQuery im JavaScript-Bereich

[data-name="element"] { /* mittels CSS im CSS-Bereich */
  color: #DDD;
}

Der Wert des Attributs data-name entspricht hierbei dem Namen des Formularelements. Also dem Namen, welcher im FORMCYCLE-Designer unter Grundeigenschaften vergeben wurde.

Diese Selektoren sind spezielle Attributselektoren. Sie können allgemein verwendet werden, um ein Elemente anhand seiner Attribute zu selektieren. In HTML kann jedes Element verschiedene Attribute haben:

<input id="xi-tf-1" class="XItem XTextField" data-name="tfMail" value="demo@example.com" data-count="9">

Elemente können anhand dieser Attribute und ihrer Werte selektiert werden. Ein Attributselektor besteht aus 2 Teilen und hat die immer die Form

[key="value"]

key

Name des Attributs, nach dem gesucht werden. Nur Elemente, welche dieses Attribut gesetzt haben, werden selektiert.

value

Wert des Attributs. Nur Elemente, die zusätzlich noch diesen Wert für das Attribut haben, werden selektiert.

Um also alle Elemente zu selektieren, welche das Attribut value gesetzt haben, wird [value] verwendet. Um nur die zu selektieren, bei den das Attribut auf einen bestimmten Wert gesetzt ist, wird [value="demo"] genutzt.

Attributselektor data-xn

Alle Formularlemente sind in einem Container gekapselt. In diesem Container sind neben dem eigentlichen Formularelement auch noch andere HTML-Elemente wie der Beschriftungstext (Label). Um den Container zu selektieren, wird statt data-name ein Attributselektor auf das Attribut data-xn (steht für xima-name) verwendet.

$("[data-xn='element']"); // mittels jQuery im JavaScript-Bereich

[data-xn=element] { /* mittels CSS im CSS-Bereich */
  font-weight: 600;
}

Weitere Attributselektoren

// Alle Eingabefelder vom Typ "text" selektieren
$("input[type='text']")

// Alle Bilder mit einem "alt" Attribut
$('img[alt]')

Es ist auch möglich, etwa nur Elemente zu selektieren, bei denen der Wert eines Attribut auf etwas bestimmtes endet. Hierzu wird statt einem Gleichheitszeichen = der Operator $= eingesetzt:

 
// Alle Links, die im Attribute "href" einen Wert haben, der mit ".pdf" endet.
$("a[href$='.pdf']")

Klassenselektoren

Im HTML gibt es ein spezielles Attribut: class. Dies wird auch oft Css-Klasse bezeichnet. Hier können mehrere frei vergebbare Klassen gelistet werden, getrennt mit einem Leerzeichen. Im Css kann das etwa genutzt werden, um allen Elementen mit einer bestimmten Klassen ein spezielles Layout zu geben. Im JavaScript kann allen Elemente mit einer bestimmten zusätzliche Funktionalität verliehen werden. Beispielsweise haben alle Formularelemente in FORMCYCLE immer die Klasse XItem und je nach Art des Formularelements noch ein zusätzliche Klasse, etwa XTextField oder XUpload.

Da Klassen so häufig benutzt werden, gibt es hierfür spezielle Selektoren. Alle Elemente einer Klasse können selektiert werden, in dem ein Selektor bestehend aus einem Punkt gefolgt vom Namen der Klasse genutzt wird. Das HTML könnte wie folgt aussehen:

<input class="XItem XTextField">
<select class="XItem XSelect">
  <option value="">Bitte wählenoption>
  <option value="1">Option 1option>
  <option value="2">Option 2option>
select>

Nun können Elemente mit Selektoren ausgewählt werden:

/* Alle Elemente mit der Klasse XItem */
.XItem {
  font-size: 20px; /* Schriftgröße auf 20 Pixels stellen*/
}

/* Nur Textfelder (Klasse XTextField) */
.XTextField {
  color: blue; /* Schriftfarbe auf blau setzen */
}

Arbeiten mit selektierten Elementen

Nachdem Elemente selektiert wurden, können diese mittels Funktionen von jQuery oder über weitere von FORMCYCLE bereitgestellte Funktionen verändert werden.

// Alle Eingabefelder verstecken
$('input[type=text]').visible(false)

// Element mit Namen Postleitzahl als Mussfeld schalten
$("[data-name='Postleitzahl']").setRequired(true)

Generische JavaScript-Funktionalität

Im FORMCYCLE-Designer können zudem unter Eigenschaften einem Element zusätzliche Klassen und eigene Attribute mitgegeben werden. Diese können dann entsprechend selektiert werden. Damit kann etwa JavaScript-Funktionalität geschrieben werden, die auf alle Elemente mit einem bestimmten Attribut angewendet wird. Im FORMCYCLE-Designer lässt sich dann festlegen, für welche Elemente diese Funktionalität angewandt werden soll.

for (const element of $("[data-user]")) {
  const prop = element.dataset.user;
  const value = XFC_METADATA.currentUser[prop];
  if (value && !element.value) {
    element.value = value;
  }
}

$("[data-user]").each(function(_, element) {
  var prop = $(element).data("user");
  var value = XFC_METADATA.currentUser[prop];
  if (value && !element.value) {
    element.value = value;
  }
});

An einem Element wird das Attribut data-user hinterlegt. Hier kann ein Wert wie etwa email oder forename eingetragen werden. Es wird dann beim Öffnen des Formulars in den Daten des aktuellen Nutzer geschaut, ob er diese Eigenschaft (E-Mail-Adresse, Vorname usw.) hat. Wenn ja, wird das Formularfeld automatisch mit dem Wert vorbefüllt. Vorteil bei dieser Vorgehensweise ist, dass das JavaScript nur einmal geschrieben werden muss und dann in jedem Formular benutzt werden kann (falls es als Mandatenressource hochgeladen wird).

Selektoren für Formularlemente

Hier findet sich eine Auflistung für häufig verwendete Selektoren in FORMCYCLE.

Liste der Klassen

Jede Art von Formularlementtyp hat eine bestimmte Css-Klasse. Mit dieser können alle Formularelement eines bestimmten Typs selektiert werden.

Hier noch ein paar graphische Darstellungen der Formularelemente und wie sie mit CSS jeweils angesprochen werden.

Namen, die auf einer "1" enden, sind für die erste Verwendung in einem Formular voreingestellt, und können im Formular-Designer in den Grundeigenschaften umbenannt werden.

Eingabe-Elemente

Container-Elemente

Gestaltungselemente

Sonstige Elemente