Erstellen Sie eine Umfrageantwort, die sich nicht widersprechen kann: native ONS-Checkboxen, sich gegenseitig ausschließende Antworten, genaue Referenzen für Schrift und Farbe sowie ein vollständiger lokaler Prüfablauf.
Native ONS 73.13.1 Checkbox und Mutually Exclusive CSS/JavaScript. Originale Frage, appseitige Validierung/Auswertung und expliziter Arial-Fallback. · Implementierungsreferenz
02
ONS Designsystem Designreferenz
ONS Design System 73.13.1 kompiliertes CSS, JavaScript und Sass-Variablen, geprüft anhand des öffentlichen Servicehandbuchs. Das Beispiel verwendet natives Checkbox- und Mutually-Exclusive-Verhalten. Im eigenständigen Beispiel ersetzt Arial OpenSans; die Anleitung zum Erstellen der Produktionskopie enthält die gebündelten Schriftarten. Die Reisefrage und die lokale Auswertung sind originale Demonstrationsinhalte.
ONS dient sowohl der statistischen Datenerhebung als auch der Veröffentlichung von Informationen. In einem Fragebogen sind sich gegenseitig ausschließende Antworten eine Frage der Datenqualität: Nutzer dürfen nicht sowohl eine Reiseart als auch die Antwort senden, dass keine Reise stattgefunden hat. Die native Mutually-Exclusive-Komponente verknüpft diese Optionen und erklärt assistiven Technologien, wie eine Auswahl aufgehoben wird.
Das Beispiel stellt eine originale Frage zu Bibliotheksbesuchen und Reisen und bietet eine lokale Antwortvorschau. Es verzichtet bewusst auf ONS-Identitätsgrafiken und behauptet nicht, dass Antworten erfasst werden. Für eine produktive Umfrage wären eigene Vorgaben zu Einwilligung, Aufbewahrung, Weiterleitung und serverseitiger Validierung erforderlich.
Die primäre Schriftfamilie ist Open Sans; aufgrund der markanten Buchstabenformen kommt Stilvariante 1 zum Einsatz. Die native Sass-Typenmatrix verwendet feste Werte für kleine und große Schriftgrößen statt einer erfundenen kontinuierlichen Skala. Der Fließtext bleibt bei 18px mit einem Zeilenabstand von 28px. Die große Hauptklasse wechselt am mittleren Breakpoint von 32/44 zu 48/56.
Auf einer Seite mit nur einer Frage kann die h 1 innerhalb der Legende des Fieldsets stehen, sodass der zugängliche Name der Gruppe und der sichtbare Titel übereinstimmen. Füge darüber keine zweite, unabhängige h 1 ein. Im Beispiel steht der Servicekontext in einem kleineren Absatz, die Auswahlhinweise folgen unterhalb der Legende.
Die eigenständige Demo verwendet ausdrücklich Arial, damit keine Anfragen für fehlende Schriftarten entstehen. Die Installationsanleitung kopiert die Schriftdateien zusammen mit CSS; das ist erforderlich, wenn statt einer Ersatzschrift die veröffentlichte OpenSans-Schriftart verwendet werden soll.
ONS Designsystem Rollen in einer Umfrageoberfläche
Fokus ist unabhängig vom Status
ONS weist semantischen Variablen Grundfarben zu. Der Text ist schwarz, gewöhnliche Links sind Ozeanblau und die primäre Schaltfläche ist Blattgrün. Sonnengelb kennzeichnet den Fokus. Rubinrot signalisiert Fehler, aber die Fehlermeldung muss dennoch angeben, welche Aktion erforderlich ist. Eine grüne Schaltfläche „Weiter“ verspricht nicht, dass die Antwort bereits die Validierung bestanden hat.
Der lokale Fragebogen verwendet den nativen Rahmen und die Auswahlgestaltung von Kontrollkästchen. Er gestaltet nicht jede Antwort als separate Marketing-Karte. Eine kurze, neutrale Linie am oberen Rand trennt das eigenständige Beispiel von der Frage, ohne den ONS-Kopfbereich nachzubilden.
Die sichtbare native Fokusdarstellung sowohl am Kontrollkästchen als auch an der Aktionsschaltfläche beibehalten.
Vor den regulären Optionen die schriftliche Anweisung „Alles Zutreffende auswählen“ anzeigen.
Die Gegenantwort mit „Oder“ absetzen, damit ihr Unterschied bereits vor der Interaktion deutlich ist.
Das Zwölf-Spalten-Raster legt Breiten über Klassen wie ons-col-8@m fest. Ab 740px belegt diese Klasse acht Spalten; darunter füllt dasselbe Element die verfügbare Inhaltsbreite aus. Das lokale Beispiel verwendet diese native Spalte, damit die lange Frage in einer gut lesbaren Breite umbricht, statt sich über den gesamten Desktop zu erstrecken.
Der Standardcontainer hat in der untersuchten Version eine maximale Breite von 64.6256rem und einen horizontalen Innenabstand von 1rem. Der öffentliche Rasterleitfaden beschreibt außerdem eine 8px-Basislinie sowie 16/24px breite Zwischenräume an der 600px-Abstandsgrenze. Diese Konzepte sind vom mittleren Spalten-Breakpoint bei 740px getrennt zu betrachten; sie bilden keinen universellen Umschaltpunkt für Mobilgeräte.
Die Antwortübersicht ersetzt die Frage innerhalb derselben Spalte, und „Antworten ändern“ führt zurück zu den vorhandenen Steuerelementen. Die Werte bleiben im Arbeitsspeicher; es gibt weder einen Routenwechsel noch eine Netzwerkanfrage.
Die ausführbaren Abstandsregeln sind feiner abgestuft als die Angabe zur 8px-Basislinie: Die unteren Abstände für xs, s, m, l und xl betragen bei einer Root-Größe von 16px jeweils 12, 16, 20, 24 und 32px. Daher führt die Referenz die tatsächlichen Werte der Abstandsregeln getrennt von den Rasterhinweisen auf.
Ein Kontrollkästchen verwendet ons-checkbox__input und ein zugehöriges ons-checkbox__label innerhalb von ons-checkbox. Das Eingabeelement behält seine gewöhnlichen name- und value-Attribute, damit die nativen Formularsemantiken weiterhin funktionieren. Die übergeordnete Struktur ons-checkboxes__item sorgt für den von der Formatvorlage erwarteten Abstand und Klickbereich.
Die regulären Optionen verwenden gemeinsam ons-js-exclusive-group-item. Für die letzte Option wird stattdessen ons-js-exclusive-option verwendet, ergänzt um data-deselect-message, das die Auswirkung erläutert. Das span-Element für die Live-Region muss mit beiden Adjektivattributen vorhanden sein: Es handelt sich nicht um zusätzliches dekoratives Markup. Wird es entfernt, stimmen die Annahmen der nativen Steuerung nicht mehr.
Dieses Quellbeispiel ist vollständig für drei reguläre Optionen und eine Gegenantwort. Passe die Substantive und Werte an eine echte Frage an; benenne nicht einfach ein unabhängiges Validierungssteuerelement in „exklusiv“ um.
html
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
ONS Designsystem Validierung und Verhalten beim Ändern
Status der Bibliothek und der Anwendung
Die Bibliothek ist dafür zuständig, welche Gegenoptionen aufgehoben werden. Der kleine Anwendungshandler im Beispiel prüft lediglich, ob mindestens eine Antwort vorhanden ist, bevor eine lokale Übersicht angezeigt wird. Ist nichts ausgewählt, zeigt er eine schriftliche Fehlermeldung an und setzt den Fokus auf die verknüpfte Meldung. Der Fehlerlink führt direkt zur ersten Auswahl, über die Nutzerinnen und Nutzer handeln können.
Die Steuerung verfolgt zusätzlich zum Wert des Kontrollkästchens im DOM den zwischengespeicherten Status hasValue. Ein Zurücksetzen allein mit checked=false könnte diesen Cache veralten lassen. Deshalb klickt die Zurücksetzen-Aktion auf jedes aktivierte Eingabeelement, sodass die nativen Listener ihr Modell aktualisieren können, und setzt anschließend den Fokus zurück auf die Frage. Dieses konkrete Integrationsproblem lässt sich nicht allein anhand der Formatvorlage erkennen.
Die Übersicht verwendet eine Liste der ausgewählten Beschriftungen. „Antworten ändern“ behält die Steuerelemente und ihre Auswahl bei. Es wird kein Erfolgshinweis angezeigt, der behauptet, eine Umfrageantwort sei eingegangen, da hinter diesem Beispiel kein Server steht.
ONS Designsystem Assets und Einbindung in Vorlagen
Zwei unterstützte Wege
Das npm-Paket enthält kompilierte Assets, Sass-Quellen, Nunjucks-Makros und eine Basis-Seitenvorlage. In dieser Vorschau wird der Weg über die kompilierten HTML verwendet: Kopiere die offiziellen CSS und main.js, bilde das dokumentierte Markup nach und lade das Skript nach dem Inhalt des body-Elements. Das Skript initialisiert passende Komponenten-Hooks, sobald das DOM bereit ist.
Ein serverseitig gerendertes Projekt kann stattdessen die Nunjucks-Makrodateien aus components verwenden. Das Checkbox-Makro akzeptiert das Kontrollkästchen-Array, Beschriftungen, Beschreibungen, die Fehlerkonfiguration und die Konfiguration mutuallyExclusive. Mit dontWrap wird die Verantwortung für das fieldset an die umgebende Fragenkomponente übertragen; dadurch kann der zugängliche Gruppenname nicht weggelassen werden.
Wenn du einzelne Sass-Dateien auswählst, importiere zuerst die Systemvariablen, Hilfsfunktionen, Dienstprogramme, Basisstile und Objekte, danach die Komponentenregeln und alle Abhängigkeiten der Komponenten. Die vollständig kompilierten CSS ersparen für dieses kleine eigenständige Beispiel die Auswahl dieser Abhängigkeiten.
Die Paketversion festschreiben und CSS, Skripte und Schriftdateien in einem stabilen lokalen Asset-Verzeichnis bereitstellen.
Für eine statische Seite kompilierte HTML verwenden oder für eine serverseitig gerenderte Anwendung Nunjucks-Makropfade konfigurieren.
CSS, JavaScript und Markup aus derselben Version verwenden und den gegenseitigen Ausschluss nach einem Upgrade erneut prüfen.
ONS Designsystem Widersprüchliche Antworten prüfen
Die Bedeutung der Daten überprüfen
Wähle „Zu Fuß“ und „Bus“ aus und anschließend „Ich habe den Ort nicht besucht.“ Beide vorherigen Auswahlen sollten aufgehoben werden. Wähle danach „Fahrrad“ aus: Die Gegenantwort muss aufgehoben werden, während „Fahrrad“ ausgewählt bleibt. Wiederhole den Test mit der Leertaste auf den fokussierten Eingabeelementen und prüfe den Ankündigungsbereich, statt davon auszugehen, dass ein sichtbares Häkchen das gesamte Verhalten bestätigt.
Fahren Sie ohne Auswahl fort, um den Fehler auszulösen. Prüfen Sie anschließend eine gültige Antwort und kehren Sie mit „Antworten ändern“ zurück. Setzen Sie schließlich nach einer Folge widersprüchlicher Antworten zurück und treffen Sie eine weitere Auswahl. So lassen sich veraltete Zustände des nativen Controllers erkennen. Bei 390 px müssen die Frage und alle Beschriftungen ohne horizontales Scrollen der Seite lesbar bleiben.
Diese Tests prüfen die lokale Interaktion, nicht die Datenübermittlung, Barrierefreiheitszertifizierung oder statistische Qualität der Fragen einer produktiven Umfrage. Ein echter Dienst muss widersprüchliche Werte weiterhin serverseitig validieren und untersuchen, ob die Antwortkategorien vollständig sind.
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
ONS Designsystem Einrichtung des KI-Agenten
Ausgangspunkt für die Implementierung
Native 73.13.1 ist kompiliert; CSS und JavaScript werden im lokalen Beispiel ausgeführt. Arial ist eine ausdrücklich festgelegte lokale Ausweichschrift; die Produktionsanweisungen enthalten die mitgelieferten OpenSans-Schriftdateien. Das vollständige ZIP mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/ons.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
bash / HTML
npm install --save-exact @ons/[email protected]
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/
<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie ein unabhängiges ONS73.13.1-Umfragebeispiel mit den nativen Checkbox- und Mutually Exclusive-Hooks, dem zugehörigen fieldset/legend, einer Gruppe gewöhnlicher Antworten und einer gegensätzlichen Antwort. Fügen Sie den erforderlichen Live-Bereich und die Abwahlattribute ein. Stellen Sie das passende native CSS und main.js bereit; schreiben Sie keinen Ersatz für den Controller zur Sicherstellung der gegenseitigen Ausschließlichkeit. Ergänzen Sie eine lokale Validierung leerer Antworten und eine Antwortprüfung, bei der Änderungen erhalten bleiben, ohne zu behaupten, dass Daten an einen Server übermittelt werden. Setzen Sie über native Ereignisse zurück, damit der zwischengespeicherte Zustand konsistent bleibt. Verwenden Sie ons-col-8@m sowie die geprüften Regeln für Typografie und semantische Farben, jedoch keine offiziellen Identitätsmerkmale.
05
ONS Designsystem Quellen und Geltungsbereich
Unabhängiges Implementierungsbeispiel mit eigenständig formulierten Umfragetexten. Der native Code steht unter der MIT-Lizenz; für die Lizenzierung der ONS-Identität und -Inhalte gelten separate Bedingungen. Antworten werden weder übertragen noch gespeichert oder als offizielle Statistik dargestellt.
