CSS-Klassen für das Formular-Modul (tabellenbasiert)
Mit dem Formulargenerator von TYPOlight können Sie die unterschiedlichsten Formulare erstellen. Da es hierfür sehr viele Möglichkeiten gibt, ist die nachfolgende Übersicht in mehrere Abschnitte aufgeteilt:
- Grundaufbau des Formulars (am Beispiel des tabellenbasierten Formulars)
- Aufbau der einzelnen Formularelemente
Grundaufbau beim tabellenbasierten Formular
Code:
div.ce_form { }
form { }
div.formbody { }
table { }
tbody { }
tr.row_0 even row_first { }
Hier folgen je nach gewähltem Formularelement unterschiedliche Ausgaben in den Tabellenfeldern (<td>)
TYPOlight nummeriert alle Tabellenzeilen (<tr>) beginnend mit der Klasse "row_0" (row_1, row_2, row_3, ...) durch. Außerdem erhalten die Tabellenzeilen abwechselnd als Zweitklasse "even" oder "odd" zugewiesen, wodurch man z.B. zeilenweise abwechselnde Farbhintergründe definieren könnte. Für die erste Tabellenzeile wird als Drittklasse noch "row_first" und für die letzte Tabellenzeige die Drittklasse "row_last" vergeben.
Für die Tabellenfelder (<td>) werden ebenfalls Klassen vergeben. Wie diese aufgebaut sind, hängt vom jeweils gewählten Formularelement ab.
Bei dieser Auflistung der einzelnen Formularelemente gehe ich bewusst davon aus, dass alle Felder als Pflichtfelder deklariert wurden, damit hier der volle Aufbau dargestellt werden kann. Wenn ihr Felder nicht als Pflichtfelder deklariert, fallen die "mandatory"-Zusatzklassen und Pflichtfeld-<span> natürlich weg.
Überschrift (je nach Wahl H1 - H6)
Code:
td.colspan headline { }
h1 { frei definierte Überschrift }
Erklärung
Code:
td.colspan explanation { }
beliebiger Inhalt der in den WYSIWYG-Editor eingegeben wurde
Textfeld
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
input.text mandatory { }
Passwortfeld
Code:
td.col_0 col_first { }
label.confirm mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
input.text password mandatory
Textarea
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
textarea.textarea mandatory
Select (Standard)
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
select.select mandatory { }
option / optiongroup { Ausgabe der einzelnen Optionswerte }
Select (Multiselect-Variante)
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
select.multiselect mandatory { }
option / optiongroup { Ausgabe der einzelnen Optionswerte }
Radiobox
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
div.radio_container mandatory { }
span { }
input.radio { }
label { Labelbezeichnung für die jeweilige Radiobox }
Checkbox
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
div.checkbox_container mandatory { }
span { }
input.checkbox
label { Labelbezeichnung für die jeweilige Checkbox }
Datei-Upload
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
input.upload mandatory { }
Sicherheitsfrage
Code:
td.col_0 col_first { }
label.mandatory { Labelbezeichnung }
span.mandatory { * als Zeichen für Pflichtfeld }
td.col_1 col_last { }
input.captcha { }
span.captcha_text { Rechenaufgabe als Antispam-Mittel }
Absendefeld
Code:
td.col_0 col_first { leeres Tabellenfeld }
td.col_1 col_last { }
div.submit_container { }
input.submit { }
TYPOlight CSS-Klassen und IDs
Zitieren
Vielen Dank!
Zitat von andreasisaak
Wie heißt diese Navi und welche iD oder Klasse hat sie?
Lesezeichen