Erstellen Sie einen Frage- und Antwortablauf im GOV.UK-Stil mit der aktuellen Typografieskala v6, responsiven Abständen, funktionalen Farben, verknüpfter Validierung und konkreter Frontend-Integration.
Senden Sie leere Felder ab, folgen Sie den verknüpften Fehlermeldungen, korrigieren Sie die Antworten und ändern Sie einen Wert auf der Prüfseite. Es werden keine Informationen an einen anderen Ort übermittelt.
Natives GOV.UK Frontend 6.5.1 CSS, Button und ErrorSummary JavaScript, lokal bereitgestellt. Alternative Helvetica-Schriftart; originale, nur lokal ausgeführte Formularvalidierung und Navigation zur Prüfseite. · Implementierungsreferenz
02
GOV.UK Designsystem-Designsystem-Referenz
GOV.UK Frontend 6.5.1 und aktuelle Dokumentation zu v6, geprüft am 3. Oktober 2026. Hexadezimalwerte bilden eine Referenz zum aktuellen Stand; bevorzugen Sie in der Produktion benannte Sass-Funktionen. Die Vorschau lädt das lokale offizielle CSS und JavaScript mit einer alternativen Schriftart und einer eigenständigen Identität.
Diese Referenz folgt der v6-Dokumentation, einschließlich der größeren Schrift auf kleinen Bildschirmen und der überarbeiteten funktionalen Farben. Ältere Screenshots können daher andere Werte zeigen. Die obige Tabelle enthält die aktuell dokumentierten Standardwerte, statt unbemerkt verschiedene Versionen zu vermischen.
Die Live-Studie zeigt eine fiktive Anfrage zu einer Gemeinschaftsveranstaltung. Sie verwendet weder eine Krone noch das GOV.UK-Wortzeichen, die Transport-Schriftart oder einen echten Übermittlungsendpunkt. Aufgabeninhalte und lokale Validierungsregeln sind Entscheidungen der Anwendung; der Aufbau der Komponenten orientiert sich an den verlinkten offiziellen Beispielen.
Für einen berechtigten Dienst auf service.gov.uk gehört GDS Transport zur offiziellen Implementierung. Öffentliche Dienste auf anderen Domains müssen eine andere Schriftart verwenden. Diese unabhängige Studie folgt der empfohlenen Alternative Helvetica Neue, Helvetica, Arial, sans-serif; ein Wechsel der Schriftart macht es nicht erforderlich, die Hierarchie des Systems aufzugeben.
Das vollständige Wertepaar für Schriftgröße und Zeilenhöhe verwenden
Verwenden Sie govuk-heading-l für die Frage zur Anfrage und govuk-body für den ergänzenden Text. Auf kleinen Bildschirmen ist die Überschrift 27/30px groß, auf größeren 36/40px. Der Fließtext bleibt in v6 bei 19/25px. Eine Fließtextgröße von 16px auf kleinen Bildschirmen würde eher das frühere Verhalten als diese Referenz wiedergeben.
Die Größentabelle enthält beide Werte, da ein Screenshot für eine einzelne Bildschirmgröße keine Regel für responsives Verhalten belegen kann. Das produktive CSS verwendet relative Einheiten. Eine Klasse wie govuk-heading-l bestimmt das Erscheinungsbild, aber nicht, ob das semantische Element h1 oder h2 sein sollte.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Responsive Einheiten entsprechen nicht festen Pixelwerten
Abstandseinheit 6 eignet sich zwischen Fragegruppen: Auf einem schmalen Bildschirm ergibt sie 20px, oberhalb der Tablet-Breite 30px. Der statische Helfer govuk-spacing(6) gibt bei jeder Bildschirmbreite 30px zurück. Die Wahl des Helfers verändert also das Verhalten, auch wenn beide Varianten auf dem Desktop identisch aussehen.
Der Container für die Standardbreite hat eine maximale Breite von 1020px. Darin begrenzt eine zweispaltige Grid-Spalte den Fragenbereich, während die äußere Seitenstruktur ausgerichtet bleibt. Auf kleinen Bildschirmen werden die Inhalte automatisch untereinander angeordnet. Unsere Vorschau behält diese Lesehierarchie bei, statt jedes Feld über eine Dashboard-Karte zu verteilen.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Verwenden Sie Rollen, statt alte Screenshots nachzubilden
Die funktionale Linkfarbe in v6 ist #1a65a6, die Fehlerfarbe #ca3535. Verwenden Sie in einem echten Sass-Build govuk-functional-colour("link") und govuk-functional-colour("error"), damit bei einem Upgrade die Palette des Projekts übernommen werden kann. Diese funktionalen Rollen unterscheiden sich von der Wahl einer allgemeinen Rot- oder Blaufarbe für Illustrationen.
Das Fokusgelb ist ausschließlich dem Fokus vorbehalten. Es sollte nicht als Standardfarbe für Auswahlmöglichkeiten oder als Werbeakzent dienen. In der Vorschau wird Gelb mit dunklem Text und einer deutlich sichtbaren dunklen Umrandung kombiniert. Ein Fehler wird durch Text und Platzierung kenntlich gemacht, nicht allein durch Rot.
Das Eingabebeispiel kombiniert govuk-form-group, govuk-label, govuk-hint und govuk-input. Das Label verweist auf die ID des Eingabefelds; aria-describedby verweist auf den Hinweis. Bei ungültiger Eingabe fügen Sie zusätzlich zu den Fehlerklassen die ID der Fehlermeldung hinzu. Ein roter Rahmen ohne diese Verknüpfung ist keine vollständige Nachbildung.
In dieser Anfrage gehören der Name der Veranstaltung und die Kontakt-E-Mail-Adresse zusammen. Es handelt sich um zwei separat beschriftete Werte innerhalb einer kurzen Aufgabe, nicht um eine Aufforderung, jedes Feld auf einer eigenen Seite zu platzieren. In der Vorschau sind beide Angaben nur zur Demonstration der Validierung erforderlich; daraus ergibt sich keine tatsächliche Genehmigungsanforderung.
Permanentes Label: Name der Veranstaltung.
Permanenter Hinweis: Verwenden Sie den Namen, der in den Informationen zu Ihrer Veranstaltung steht.
Behebbarer Fehler: Geben Sie den Namen der Veranstaltung ein.
Native Auszeichnung und Anwendungsverhalten haben unterschiedliche Aufgaben
GOV.UK Frontend gestaltet die Komponenten und erweitert sie um Funktionen. Es entscheidet nicht, welche E-Mail-Adresse für diesen Dienst zulässig ist, speichert keinen Entwurf und nimmt keine Anfrage entgegen. In der Vorschau validiert JavaScript die beiden Felder und speichert ihre Werte nur auf der aktuellen Seite. Beim Neuladen wird die Eingabe gelöscht.
Machen Sie die Zusammenfassung zum Weg zur Korrektur
Zeigen Sie nach einem ungültigen Klick auf „Weiter“ die Fehlerzusammenfassung vor dem Formular an und setzen Sie den Fokus darauf. Jeder Listenlink verweist auf die entsprechende Antwort. Bei einem einzelnen Textfeld verweist der Link auf dessen Eingabe-ID. Bei einer Gruppe von Auswahlmöglichkeiten sollte er, wie in der offiziellen Anleitung beschrieben, auf das erste passende Steuerelement verweisen.
Die native Fehlerzusammenfassung verwendet zur Erweiterung data-module="govuk-error-summary". Die Vorschau fügt die Zusammenfassung nur bei fehlgeschlagener Validierung ein und erstellt dann ErrorSummary aus dem lokalen Modul in Version 6.5.1. Die Bibliothek übernimmt den Fokus und die verknüpfte Navigation; die Anwendung stellt die Meldungen bereit, behält die eingegebenen Werte bei und entfernt nicht mehr zutreffende Fehler.
Probieren Sie den tatsächlichen Ablauf zur Fehlerkorrektur aus
Klicken Sie auf „Weiter“, wenn beide Felder leer sind. Folgen Sie dem Fehler zum Veranstaltungsnamen, geben Sie einen fiktiven Titel ein und tragen Sie dann eine ungültige E-Mail-Adresse ein. Klicken Sie erneut auf „Weiter“: Nun sollte nur noch der verbleibende Fehler angezeigt werden, während der Titel erhalten bleibt. Korrigieren Sie die Adresse, um zur Überprüfung zu gelangen. So wird das Verhalten bei verschiedenen Zuständen sichtbar, statt dauerhaft ein beispielhaftes Fehlermuster anzuzeigen.
Verwenden Sie eine Definitionsliste statt einer Datentabelle
Die Seite zum Prüfen der Antworten enthält eine govuk-summary-list. Jede Zeile besteht aus einem dt-Schlüssel, einem dd-Wert und einem dd-Bereich für Aktionen. Ein ausgeblendetes Label hinter „Ändern“ gibt an, um welche Antwort es sich handelt. Lange Veranstaltungsnamen werden im Wertebereich umbrochen, ohne den Bearbeitungslink zu verdecken.
Die Aktion „Ändern“ stellt das Formular wieder her und setzt den Fokus auf das ausgewählte Feld. Beim Fortfahren wird die Eingabe erneut validiert und die aktualisierte Prüfseite angezeigt. Der Rückweg wird durch Anwendungscode festgelegt; das Designsystem stellt die Darstellungsstruktur bereit.
Beenden Sie den Ablauf an der wahrheitsgemäßen Grenze
Diese Studie endet auf der Prüfseite, da kein Dienst die Daten entgegennimmt. Bei einer echten Prüfseite müssen vor dem tatsächlichen Senden die Informationen angezeigt werden, die übermittelt werden. Eine Anwendung mit Erklärungen oder einer Backend-Bestätigung benötigt zusätzliche Dienstlogik; ein grünes Feld allein kann dieses Ergebnis nicht herbeiführen.
Vervollständigen Sie die beiden fiktiven Antworten und fahren Sie mit der Prüfung fort.
Wählen Sie „Veranstaltungsnamen ändern“ und bearbeiten Sie nur diese Antwort.
Fahren Sie fort und prüfen Sie, ob sowohl der korrigierte Titel als auch die beibehaltene E-Mail-Adresse angezeigt werden.
Die folgende Einrichtung verwendet govuk-frontend@6 und Dart Sass mit dem Node-Paketimporter. Sie kompiliert die dokumentierte Schriftkonfiguration ohne Branding und kopiert die Browser-Distribution von JavaScript. Speichern Sie die aufgelöste Lockdatei im Repository, damit die genaue Version des Projekts festgehalten wird.
Das Beispiel lädt weder Transport noch Bildmaterial der Regierung. Ein Dienst, der Markenressourcen verwenden darf, muss außerdem die offiziellen Assets über den dokumentierten Asset-Pfad bereitstellen. Anwendungen mit einem anderen Build-Tool können dasselbe Sass-Modul und denselben initAll-Einstieg verwenden und lediglich ihre Bündelung entsprechend anpassen.
Initialisieren Sie die Komponenten, sobald das Markup vorhanden ist
Die eigenständige Vorschau verwendet die offiziellen, lokal kopierten CSS und JavaScript in Version 6.5.1. Eine eng begrenzte Schriftüberschreibung ersetzt Transport im gesamten Beispiel. Die Formularvalidierung und der Überprüfungsbildschirm sind Anwendungscode, während die Verbesserungen für Button und ErrorSummary aus der Bibliothek stammen. Das separate Sass-Build-Rezept dokumentiert die empfohlene konfigurierbare Einrichtung; diese Kompilierung wurde hier nicht ausgeführt.
GOV.UK Designsystem: Beispiele für Design-System-Komponenten
Texteingabe: Beschriftung, Hinweis und Inline-Fehler
Der Beispielzustand fügt der Gruppe und dem Eingabefeld den Fehlermodifikator hinzu. Die Beschreibung des Eingabefelds verweist über die ID auf den dauerhaften Hinweis und den aktuellen Fehler.
html
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="event-name">Event name</label>
<div id="event-name-hint" class="govuk-hint">Use the name shown on your event information.</div>
<p id="event-name-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter an event name
</p>
<input class="govuk-input govuk-input--error" id="event-name"
name="eventName" type="text"
aria-describedby="event-name-hint event-name-error">
</div>
Entfernen Sie im gültigen Zustand den Fehlerabsatz, die Fehlermodifikatoren und die Fehler-ID aus aria-describedby.
Behalten Sie bei einem Validierungsfehler den tatsächlichen Wert bei. Verwenden Sie maskierte Serverausgabe oder weisen Sie Text und Wert über das DOM zu.
Fehlerzusammenfassung: zur Antwort navigieren
Platzieren Sie die Zusammenfassung vor dem Frageninhalt. Ihre Meldung stimmt mit dem Inline-Fehler überein, und der Link verweist auf das Eingabefeld, nicht auf einen anderen Container.
html
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">There is a problem</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li><a href="#event-name">Enter an event name</a></li>
</ul>
</div>
</div>
</div>
Die Frontend-Initialisierung übernimmt bei einer nativen Implementierung das Fokusverhalten der Zusammenfassung.
Die Live-Studie erstellt nach dem Einfügen jeder Fehlerzusammenfassung für eine fehlgeschlagene Validierung eine neue ErrorSummary; die Validierung der Anwendung bleibt davon getrennt.
Antworten überprüfen: eine semantische Zusammenfassungsliste
Eine Definitionsliste verknüpft die Antwortbezeichnung mit ihrem Wert und einem gezielten Bearbeitungsziel. Das verborgene Suffix unterscheidet gleichlautende „Ändern“-Links.
Der Parameter returnTo ist hier eine Konvention der Anwendung, nicht von Frontend API.
Kehren Sie von der Bearbeitung zur Überprüfung zurück und behalten Sie alle nicht betroffenen Antworten bei.
Vollständiges eigenständiges Beispiel
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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></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
GOV.UK Designsystem Agenteneinrichtung
Ausgangspunkt für die Implementierung
Legen Sie die Shell-Befehle, den Inhalt von app.scss und die HTML-Fragmente an den jeweils angegebenen Stellen ab. Die Vorschau verwendet lokal kopierte offizielle Assets der Version 6.5.1 mit einer Schriftüberschreibung; dieses Sass-Build-Rezept ist dokumentiert, wurde in diesem Arbeitsbereich jedoch nicht kompiliert. Das vollständige ZIP mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die genauen Abhängigkeiten der 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/gov-uk.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Ein Prompt für dein Projekt
Agenten-Prompt
Implementieren Sie die Anfrage zu einer Veranstaltung mit zwei Feldern mithilfe von GOV.UK Frontend v6 und der in dieser Anleitung beschriebenen unmarkierten Helvetica-Schriftkonfiguration. Verwenden Sie die tatsächlichen Strukturen für form-group, Eingabefeld, Fehlerzusammenfassung und Zusammenfassungsliste, verknüpfte Inline-Fehler, beibehaltene Antworten, gezielte „Ändern“-Links und einen Abschluss, der nur der Überprüfung dient. Setzen Sie die dokumentierte responsive Typografie und Abstände mithilfe der Frontend-Klassen um. Behalten Sie die tatsächliche Projektidentität bei und erstellen Sie weder eine offizielle Übermittlung noch ein erfundenes Backend-Ergebnis. Prüfen Sie die Zustände „leer“, „ungültige E-Mail-Adresse“, „korrigiert“, „Überprüfung“ und „Antwort ändern“.
05
GOV.UK Designsystem Quellen und Geltungsbereich
Eigenständige Anwendungsstudie zu OpenDesign mit Komponenten-CSS und JavaScript aus GOV.UK Frontend 6.5.1. Es werden weder ein Regierungslogo noch die Schrift Transport, ein offizieller Dienst, eine tatsächliche Übermittlung oder eine Konformitätszertifizierung impliziert. Die Formularregeln und die Navigation zur Überprüfung sind eigens entwickelter Anwendungscode.
