Form Formulare

Die form Komponente rendert vollständige Formulare anhand von Konfigurationsobjekten. Sie unterstützt verschiedene Feldtypen und die HTMX-basierte Übermittlung ohne Seitenneuladen.

WCAG AA
HTMX

Funktionen

  • Feldtypen: Text, E-Mail, Passwort, Zahl, Telefon, URL, Datum, Textbereich und Auswahlfeld.

  • Titel und Beschreibung: Optionale Formularüberschrift.

  • Zurücksetzen-Schaltfläche: Optionale Schaltfläche zum Löschen des Formulars.

  • HTMX-Integration: Asynchrone Formularübermittlung.

HTML

Verwendung

Die Komponente wird über das form Tag eingebunden.

{% load insight_tags %} {% form config=form_config %}

Parameter

Laden…

config (FormConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige ID für das Formularelement.

 "" False
title str

Der Titel des Formulars wird oben angezeigt.

 "" False
description str

Eine optionale Beschreibung unterhalb des Titels.

 "" False
fields

Liste der Formularfeldkonfigurationen.

 [] False
show_reset_button bool

Ob eine Reset-Button angezeigt werden soll.

 False False
submit_label str

Beschriftung für den „Absenden“ Button.

 "" False
reset_label str

Beschriftung für den „Zurücksetzen“ Button.

 "" False
request_url str

Ziel-URL für die Formularübermittlung.

 "" False
method str

HTTP-Methode für die Formularübermittlung (GET oder POST).

 "post" False
htmx_config

HTMX-Konfiguration für die AJAX-Übermittlung.

 None False
FormConfig( tag_id="contact-form", title="Contact Us", description="We'll get back to you within 24 hours.", fields=[ FormFieldConfig(input_type="text", name="name", label="Name", required=True), FormFieldConfig(input_type="email", name="email", label="E-Mail", required=True), FormFieldConfig(input_type="textarea", name="message", label="Message", rows=5), ], show_reset_button=True, htmx_config=HtmxConfig(request_url="/contact_submission", target="#form-response", swap_method="innerHTML"), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Artikel verwendet das semantische <form> Element.

  • Formularfelder verwenden die entsprechenden Eingabekomponenten mit den richtigen Beschriftungszuordnungen

  • Die „Absenden“ und „Zurücksetzen“ Buttons sind mit aussagekräftigen Beschriftungen versehen.

  • Der Ladeindikator verfügt über die Attribute role='status' und aria-live='polite' für die Ansage durch Screenreader.

  • Der SVG-Ladeindikator wird mithilfe von aria-hidden='true' vor assistiven Technologien ausgeblendet.

  • The HTMX error container #form-error has role='alert', aria-live='assertive' and aria-atomic='true' so server-side errors are announced immediately.

Verwandte Themen