FORMULARE / PHASE 8

Neu dabei? Rittek UI in HTML oder PHP einbinden

Dieses Grundgerüst funktioniert auch als .php-Datei. Setze das Beispiel-HTML in den Body. JavaScript-Beispiele kommen darunter in einen <script type="module">-Block. Bei einem eigenen Server ersetzt du /assets/ in den Imports durch https://ui.rittek.de/assets/ oder kopierst die Assets auf deinen Server. Die Demo-Navigation gehört nicht zum Framework.

HTML · Grundgerüst

<!doctype html>
<html lang="de" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Rittek-Seite</title>
  <link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
  <link rel="stylesheet" href="https://ui.rittek.de/assets/wizard.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
  <!-- Hier das HTML des gewünschten Beispiels einsetzen. -->
  <script src="https://ui.rittek.de/assets/rittek.js"></script>
  <!-- JavaScript aus dem Beispiel in einen script type="module"-Block einsetzen. -->
</body>
</html>

Schritt für Schritt zum Ergebnis.

Ein optionales Wizard-Modul für übersichtliche Abläufe: Angaben machen, überprüfen und lokal abschließen. Die Eingaben bleiben beim Wechsel zwischen Schritten erhalten.

Demo: ein Projekt vorbereiten

Fiktive Angaben reichen. Es werden keine Daten versendet oder gespeichert. Pflichtfelder werden vor dem nächsten Schritt mit den nativen Browserregeln geprüft.

Die erneute Initialisierung entfernt vorherige Listener und startet bei Schritt 1. Feldwerte werden dabei nicht gelöscht.

Ein Formular mit zwei Schritten

fieldset markiert einen Schritt. Das Modul prüft vor dem Weitergehen die Pflichtfelder und versendet selbst keine Angaben.

HTML

<form id="ex-wizard" method="dialog" data-r-wizard>
  <fieldset data-r-step data-r-step-title="Projekt">
    <legend>Projekt</legend>
    <label class="r-label mt-4" for="ex-wizard-name">Projektname *</label>
    <input class="r-input" id="ex-wizard-name" name="project" required minlength="3">
  </fieldset>
  <fieldset data-r-step data-r-step-title="Prüfen">
    <legend>Prüfen</legend>
    <p class="mt-4">Projekt: <strong data-r-review-value="project">Noch nicht angegeben</strong></p>
    <label class="flex gap-3 items-center mt-4"><input class="r-check" type="checkbox" name="confirmation" required> Angaben geprüft *</label>
  </fieldset>
  <p class="r-alert mt-4" data-r-wizard-result role="status" hidden></p>
  <div class="r-wizard-actions" data-r-wizard-controls hidden>
    <button type="button" class="r-button" data-r-wizard-previous>Zurück</button>
    <button type="button" class="r-button r-button-primary" data-r-wizard-next>Weiter</button>
    <button type="submit" class="r-button r-button-primary" data-r-wizard-finish>Abschließen</button>
    <button type="reset" class="r-button">Zurücksetzen</button>
  </div>
</form>

JavaScript · type="module"

import {createWizard} from 'https://ui.rittek.de/assets/modules/wizard.js';
const wizard = createWizard(document.getElementById('ex-wizard'));

CSS

@import url("https://ui.rittek.de/assets/wizard.css");

Einbindung und Vertrag

<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/wizard.css">

import {createWizard, initWizards}
  from '/assets/modules/wizard.js';

const wizard = createWizard(formElement);
wizard.next();     // prüft aktuellen Schritt
wizard.previous(); // erhält Feldwerte
wizard.getState(); // {step: 0, total: 3, completed: false}
wizard.reset();    // native Formularwerte zurücksetzen
wizard.destroy(); // Listener und erzeugte UI entfernen

// Optional mehrere Formulare initialisieren:
const group = initWizards(document);
// group.destroy();

Markiere das Formular mit data-r-wizard, seine Schritte mit data-r-step und optional data-r-step-title. Vor-/Zurück-/Abschlussbuttons verwenden data-r-wizard-next, data-r-wizard-previous und data-r-wizard-finish. Die Moduldatei und stylesheet sind optional; sie werden nicht vom Framework automatisch geladen.

Ereignisse

rittek:wizardchange: detail.step (nullbasiert), total, completed.
rittek:wizardinvalid: Schritt und Feldname; erster ungültiger Eintrag erhält Fokus.
rittek:wizardcomplete: Status und detail.formData. Das Modul versendet selbst keine Daten.
rittek:wizardreset: zurückgesetzter Schrittstatus.

Die Anwendung kann den Abschluss abonnieren und selbst einen Serveradapter ausführen. Servervalidierung und Speicherung sind nicht Teil dieses Moduls. Review-Werte werden nur für ausdrücklich mit data-r-review-value="feldname" markierte Stellen ausgegeben; Passwort- und Dateifelder werden dort nicht angezeigt.

Ohne JavaScript bleiben die Schritte sichtbar. Die Demo nutzt method="dialog", damit auch dann keine Angaben versehentlich per GET versendet werden. Mehrere Instanzen und erneute Initialisierung derselben Formularinstanz sind unterstützt; Nachträglich hinzugefügte Felder oder Schritte benötigen eine erneute Initialisierung.