FORMULARMODULE / 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/combobox.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>

Auswählen, ohne lange zu suchen.

Ein natives Auswahlfeld als Grundlage. Das optionale Modul ergänzt Suche, Tastatursteuerung und eine zugängliche Ergebnisliste.

Standort finden

Suche zum Beispiel nach „munchen“. Pfeiltasten bewegen die aktive Option; Enter bestätigt. Escape stellt in der geöffneten Liste die zuletzt bestätigte Auswahl wieder her. Die Auswahl bleibt ein nativer Formularwert.

Ein Auswahlfeld durchsuchbar machen

Das select bleibt der Formularwert. Das Modul ergänzt Suche und Tastaturbedienung. Freier Text zählt nicht als ausgewählte Option.

HTML

<form id="ex-location-form" method="dialog">
  <label class="r-label" for="ex-location">Standort *</label>
  <select class="r-input" id="ex-location" name="location" data-r-combobox required>
    <option value="" disabled selected>Bitte auswählen</option>
    <option value="berlin">Berlin</option>
    <option value="muenchen">München</option>
    <option value="wien">Wien</option>
  </select>
  <button class="r-button r-button-primary mt-4" type="submit">Auswahl prüfen</button>
  <p id="ex-location-result" class="r-help mt-4" role="status"></p>
</form>

JavaScript · type="module"

import {initCombobox} from 'https://ui.rittek.de/assets/modules/combobox.js';
const choices = initCombobox(document);
const form = document.getElementById('ex-location-form');
form.addEventListener('submit', event => {
  event.preventDefault();
  if (!form.reportValidity()) return;
  document.getElementById('ex-location-result').textContent =
    'Gewählt: ' + new FormData(form).get('location');
});

CSS

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

Optionaler Eintrag

Kategorie

Eine freiwillige Auswahl

Ohne required ist die Auswahl freiwillig. Eine leere Option erlaubt ausdrücklich keine Kategorie.

HTML

<label class="r-label" for="ex-category">Kategorie</label>
<select class="r-input" id="ex-category" name="category" data-r-combobox>
  <option value="">Keine Kategorie</option>
  <option value="service">Service</option>
  <option value="consulting">Beratung</option>
</select>

JavaScript · type="module"

import {initCombobox} from 'https://ui.rittek.de/assets/modules/combobox.js';
const categories = initCombobox(document);

CSS

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

Deaktiviert

Zugriffsstufe

Deaktivierte Felder bleiben deaktiviert. Nicht verfügbare Optionen erscheinen nicht in der Trefferliste.

Ein deaktiviertes Feld

disabled bleibt auch nach der Erweiterung wirksam. Das Feld wird nicht als Formularwert versendet.

HTML

<label class="r-label" for="ex-access">Zugriffsstufe</label>
<select class="r-input" id="ex-access" name="access" data-r-combobox disabled>
  <option value="readonly">Nur lesen</option>
  <option value="editor">Bearbeiten</option>
</select>

JavaScript · type="module"

import {initCombobox} from 'https://ui.rittek.de/assets/modules/combobox.js';
const accessFields = initCombobox(document);

CSS

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

Einbindung

<link rel="stylesheet" href="/assets/combobox.css">
<select name="location" data-r-combobox required>
  <option value="" disabled selected>Bitte auswählen</option>
  <option value="berlin">Berlin</option>
</select>

import {initCombobox} from '/assets/modules/combobox.js';
const choices = initCombobox(document);
// choices.refresh();
// choices.destroy();

Beim Tippen eines anderen Textes wird der bisherige native Wert sofort gelöscht und ein change-Ereignis ausgelöst. Erst eine explizite Auswahl ist wieder gültig. Escape kann den letzten bestätigten Eintrag wiederherstellen. Das Modul kopiert die Pflichtfeldprüfung auf das Suchfeld, während das ursprüngliche select den Formularwert trägt. Bei destroy() wird das native Feld einschließlich Pflichtfeldregel wiederhergestellt.

Options- oder Disabled-Änderungen mit refresh() übernehmen. Eine dynamische Pflichtfeldänderung erfolgt am jeweiligen Control über refresh({required: true/false}). Die controls-Liste enthält select, input, refresh() und destroy(). Mehrfachauswahl ist bewusst noch nicht enthalten. Bei Nutzung des Formularmoduls initCombobox() vor initForms() aufrufen, damit dessen Feldliste die erzeugten Suchfelder erfasst; andernfalls initForms() nach dem Enhancement neu initialisieren.

Die Demo arbeitet lokal; method="dialog" verhindert Datenversand. Für eigene Anwendungen bleibt serverseitige Prüfung der erlaubten Werte erforderlich.