Formulare
Über das Pattern
Wenn Eingabefelder über eine bestimmte Funktion verfügen, die über das autocomplete Attribut abgebildet werden kann, dann sollte das passende autocomplete Attribut auch angegeben werden.
Unterstützend sollten die Werte der id und name Attribute des Eingabefeldes gleich oder zumindest ähnlich lauten wie des autocomplete Attributs.
<input type="password" autocomplete="current-password" name="password" id="password">JavaScript
Anwendung
Nur für Toggle Button.
import { initToggleButton } from './toggle-button.js';
initToggleButton()Nur für Schieberegler.
import { initRangeInput } from './forms.js';
initRangeInput()Nur für Link kopieren-Button.
import { initCopyToClipBoard } from './copy-to-clipboard.js';
initCopyToClipBoard()Parameter und Anwendung in Nunjucks
# Parameter form(id, method, action, class, inline)
id: "string" # ID des Formulars
method: "string" # Method des Formulars; zulässige Werte GET, POST
action: "string" # Action des Formulars
class: "string" # CSS Klassen
inline: "Boolean" # Formularelemente nebeneinander darstellen (default: false)
# Parameter input(settings)
settings: "object"
id: "string" # ID des Inputfelds
label: "object" # Label des Inputfelds
text: "string" # Labeltext frei wählbar
no_label: "boolean" # (default: false) bei true ist Label nicht sichtbar (Achtung: Barrierefreiheit)
type: "string" # Typ des Inputfelds. Zulässige Werte: password, text, tel, url, date, time, email
name: "string" # Name des Inputfelds
message: "object"
text: "string" # Text frei wählbar (für Fehler- oder Hinweistext)
type: "string" # zulässige Werte: (default: error), hint
value: "string" # Wert des Inputfelds
rows: "int" # Bei Angabe, wird statt eines Inputfeldes ein Textfeld mit der entsprechenden Größe erzeugt
attributes: "object" # optionale Attribute
placeholder: "string" # Frei wählbar
aria-invalid: "boolean" # bei true -> wird das Feld invalide (border-color: siehe /look-and-feel/farben/#ui-farben -> Fehler)
required: "boolean" # bei true -> wird als Pflichtfeld dargestellt
# Parameter radioCheckbox(settings)
settings: "object"
id: "string" # ID des Inputfelds
label: "object" # Label des Inputfelds
text: "string" # Labeltext frei wählbar
name: "string" # Name des Inputfelds
value: "string" # Wert des Inputfelds
type: "string" # Typ der Checkbox. Zulässige Werte: radio, checkbox
message: "object"
text: "string" # Text frei wählbar (für Fehler- oder Hinweistext)
type: "string" # zulässige Werte: (default: error), hint
attributes: "object"
checked: "boolean" # (default: false)
# Parameter select(settings)
settings: "object"
id: "string" # ID der Selektbox
label: "object" # Label der Selectbox
text: "string" Labeltext frei wählbar
no_label: "boolean" # (default: false) bei true ist Label nicht sichtbar (Achtung: Barrierefreiheit)
message: "object"
text: "string" # Text frei wählbar (für Fehler- oder Hinweistext)
type: "string" # zulässige Werte: (default: error), hint
items: "array"
- value: "string" # Wert der jeweiligen Option frei wählbar
text: "string" # Text frei wählbar
attributes: "object"
required: "boolean" # bei true -> wird als Pflichtfeld dargestellt
# Parameter range(settings)
settings: "object"
id: "string" # ID frei wählbar
label: "object" # Label frei wählbar
initialValue: "int" # (default: 1) zwischen minVal (Startwert) und maxVal (Endwert)
minValue: "int" # (default: 1) frei wählbar
maxValue: "int" # (default: 2) frei wählbar
stepSize: "int" # (default: 0.1) frei wählbar. Zählwert (Größe der Schritte) zwischen minVal und maxVal
# Anwendung:
{% from "components/form/form.njk" import form, input, select, radioCheckbox, range with context %}
## Die Javascript-Datei "forms.js" muss eingebunden sein.
{% call form(id = "form_id", method, action) %}
{{ input(settings) }}
{{ range(settings) }}
{{ select(settings) }}
{{ radioCheckbox(settings) }}
{% endcall %}Variationen
Login Formular
Eingabefeld Standard
Eingabefeld mit Sternsymbol (verpflichtend)
Eingabefeld mit Fehler
Eingabefeld mit unsichtbarem Label
Bezeichnungen für Eingabefelder (<label>) müssen in jedem Fall existieren. In seltenen Fällen, beispielsweise wenn sich die Funktion des Eingabefelds aus dem Kontext erschließt, können <label> Elemente ausgeblendet werden. Dafür eigent sich die Utility Klasse .wm-h-vh.
Das placeholder Attribut darf nicht anstelle der Bezeichnung verwendent werden, sondern immer nur unterstützend.
Select/Dropdown mit Fehler
Text kopieren-Button
Durch Klick auf einen „Text kopieren“-Button lässt sich der Text in dem Textfeld darüber kopieren.
Link kopieren-Button
Durch Klick auf einen „Link kopieren“-Button lässt sich der Link aus dem Eingabefeld kopieren.
Schieberegler
Der Start- und Endwert sowie der Zählwert können in HTML über die Attribute min, max und step angegeben werden.
Fortschrittsanzeige
Fortschrittsanzeige in mehrseitigen Formularen.
- Einstieg
- Standort
- Beilagen
- Kontrolle
- Abschluss
HTML
Laden…Nunjucks
Laden…