Einführung
Still & Spoke veranstaltet samstags kleine Töpferkurse. Die Studioseite ist vorbereitet, doch das Anmeldeformular braucht sichtbare Beschriftungen, native Eingabeprüfungen, einen bedingt erforderlichen Sitzplatzhinweis und ein Layout, das auf schmalen Bildschirmen per Tastatur bedienbar ist. Du erstellst eine echte lokale Buchung und zeigst nicht nur Erfolgstext an. Das unabhängige Study form bietet vor deinen Änderungen ein vollständiges Beispiel.
Du benötigst grundlegende HTML-Elemente, CSS-Selektoren und Layout sowie JavaScript-Objekte, Funktionen, DOM-Auswahl und Ereignisse. Dieses Lab führt Beschriftungsbeziehungen, Browserbedingungen, zugängliche Beschreibungen, bedingtes required, sichtbaren Fokus und die hier verwendeten responsiven Regeln ein. Im ersten Lab übernehmen ein vorbereiteter Sendehandler und eine lokale API die Anfragen; das nächste Lab erstellt diesen Handler. Alle Personen und Adressen sind synthetisch; es werden weder E-Mails verschickt noch Zahlungen ausgelöst. Dies ist eine praktische Übung zur Bedienbarkeit, keine vollständige Barrierefreiheitszertifizierung. Die 50 Minuten sind eine Autorenschätzung einschließlich Lesen und üblicher Fehler.
Verwende Workspace für Befehle und Studio für die Website. Änderbar sind /home/labex/project/stillspoke/form.html, validity.js und form.css. Erhalte die übrigen Dateien, die vorbereitete API, Kapazitätsregeln und vorhandene Besucher. Jedes Lab startet unabhängig. Der Server setzt den exakten Inhalt von form.html in die gestaltete Seitenhülle ein; er ergänzt keine fehlenden Beschriftungen und erzeugt deine Arbeit nicht neu. Warte nach dem Aktualisieren auf das vollständige Laden, bevor du das Formular verwendest. Die Websitebeschriftungen bleiben in allen Dokumentationssprachen englisch.
Gib jedem Steuerelement einen sichtbaren Namen
Verwende in diesem Schritt das fertige Beispiel per Tastatur und verbinde dann jedes Steuerelement deiner Arbeitsseite mit seiner sichtbaren Beschriftung und Anleitung.
Wähle in Studio den Seitenlink Study form. Du navigierst innerhalb der Website und wechselst keinen LabEx Tab. Das Beispiel hat eine eigene API und Datenbank; es vervollständigt deine Arbeit nicht und belegt keine Plätze deiner Arbeitsseite. Drücke Tab, bis Your name einen sichtbaren Umriss erhält. Gib Example Guest ein, drücke Tab und gib sample@example.test ein. Wechsle mit Tab zu Session, drücke C für Clay, slowly / 10:00 und lies vor dem Fortfahren den gewählten Titel. Diese native Auswahlliste unterstützt die Eingabe des Optionsanfangs. Drücke Tab zum Hilfekästchen, Tab zur optionalen Notiz und Tab zu Reserve my place. Drücke einmal Enter. Warte, bis Submission result Reserved for Example Guest und eine vom Server ausgestellte Confirmation SS-… zeigt. Die passive Sendemeldung verschwindet. Der Ergebnisabschnitt erhält den Fokus, damit du ihn leicht findest.
Das Bild zeigt das Ergebnis mit eigener Überschrift und echter Bestätigung. Deine Nummer wird anders lauten.
Wähle auf der Beispielseite Studio records. Finde denselben Namen, dieselbe Adresse, lesbare Uhrzeit und Bestätigungsnummer. Diese Seite liest akzeptierte Datensätze, nicht den Ergebnistext des Browsers. Wähle Back to signup, dann Work form, um zu deiner Seite zurückzukehren. Sie ist noch unvollständig und enthält keine neue Arbeitsbuchung; das Beispiel zählt nicht.
Wechsle zu Workspace. cd ändert das aktuelle Verzeichnis dieses Terminals; ein absoluter Pfad beginnt mit /. pwd gibt dieses Verzeichnis aus. Diese Befehle legen das Bearbeitungsziel ausdrücklich fest:
cd /home/labex/project/stillspoke
pwd
Erwartete Ausgabe:
/home/labex/project/stillspoke
Die name-Werte des Formulars sind die API-Schlüssel name, email, session, support und note. Eine HTML-id kennzeichnet ein Element auf der Seite. Der for-Wert einer Beschriftung verweist auf die id ihres Eingabefelds. Ein Klick auf den sichtbaren Text oder dessen Lesen mit assistiver Technik identifiziert so das Steuerelement. Hier nutzt Your name for="person", der übermittelte Schlüssel ist dagegen name; beide Attribute haben unterschiedliche Aufgaben. Das Einbetten des Kästchens in seine Beschriftung erzeugt eine implizite Verbindung. autocomplete="name" und autocomplete="email" kennzeichnen, welche Informationen der Browser zum Ausfüllen anbieten kann; sie senden selbst keine Daten. Platzhalter verschwinden beim Tippen und ersetzen keine sichtbare Beschriftung.
required weist einen leeren Wert vor dem Senden zurück. type="email" fordert den Browser auf, ungültige E-Mail-Syntax abzulehnen; es beweist nicht, wem die Adresse gehört. minlength="2" verlangt mindestens zwei Zeichen im Namen. Die erste leere Option macht die Auswahl eines echten Termins erforderlich. Der value einer Option ist ihre stabile Serveridentität, der sichtbare Titel ist für Menschen. Leite diese Beziehung nicht aus der Position ab.
aria-describedby enthält durch Leerzeichen getrennte IDs. Es verbindet jedes Feld mit dauerhafter Hilfe und einem anfangs leeren Fehlerabsatz. Die Hilfe erklärt vor einem Fehler die Regel; der Fehlertext ergänzt nach einer Serverablehnung den Grund. Verwende klare Worte zusätzlich zur Farbe. aria-hidden="true" verbirgt nur den dekorativen Pfeil vor assistiver Technik. ↗ ist eine numerische HTML-Zeichenreferenz: Der ASCII-Quelltext erscheint im Browser als Pfeil. Der Absatz Sending trägt role="status" für passive Ankündigungen. aria-labelledby des Ergebnisabschnitts verweist auf die Überschriften-ID und gibt ihm einen Namen. Das anfängliche hidden verbirgt das leere Ergebnis, bis es etwas anzuzeigen gibt. Der getrennte Abschnitt hat tabindex="-1": Skripte können ihn fokussieren, ohne einen zusätzlichen Tab-Stopp einzufügen. Eine Statusankündigung fokussieren wir nicht.
Der folgende Befehl ersetzt nur form.html. cat schreibt den folgenden Text; > ersetzt die genannte Datei. Der in Anführungszeichen gesetzte Marker HTML nach << beginnt ein Here-Dokument: Bis zur Zeile mit ausschließlich HTML bleibt alles wörtlicher Dateiinhalt. Die Anführungszeichen verhindern die Interpretation von HTML-Zeichen durch die Shell. Füge den gesamten Block einschließlich Endmarker ein. Die zurückkehrende Shell-Eingabeaufforderung bedeutet, dass das Schreiben fertig ist; eine separate Speichertaste gibt es nicht. Füge die Markdown-Backticks nicht ein. Diese Bearbeitungsform wird später auch für JavaScript und CSS verwendet.
cd /home/labex/project/stillspoke
cat > form.html <<'HTML'
<form id="signup">
<div class="pair">
<div class="field">
<label for="person">Your name (required)</label>
<input id="person" name="name" required minlength="2" autocomplete="name"
aria-describedby="name-help name-error">
<small id="name-help">At least two characters.</small>
<p class="error" id="name-error"></p>
</div>
<div class="field">
<label for="email">Email (required)</label>
<input id="email" name="email" type="email" required autocomplete="email"
aria-describedby="email-help email-error">
<small id="email-help">Practice address: you@example.test</small>
<p class="error" id="email-error"></p>
</div>
</div>
<div class="field">
<label for="session">Session (required)</label>
<select id="session" name="session" required aria-describedby="session-help session-error">
<option value="">Choose a time</option>
<option value="clay-morning">Clay, slowly / 10:00</option>
<option value="clay-afternoon">Clay, slowly / 14:00</option>
</select>
<small id="session-help">Choose a listed time. The afternoon session is full.</small>
<p class="error" id="session-error"></p>
</div>
<label class="check"><input type="checkbox" name="support"> I need seating assistance</label>
<div class="field">
<label for="note">Seating note (required when assistance is selected)</label>
<textarea id="note" name="note" rows="2" aria-describedby="note-help note-error"></textarea>
<small id="note-help">When assistance is selected, describe the help in at least 5 characters.</small>
<p class="error" id="note-error"></p>
</div>
<button type="submit">Reserve my place <span aria-hidden="true">↗</span></button>
<p id="progress" role="status"></p>
<section id="result" aria-labelledby="result-heading" tabindex="-1" hidden>
<h3 id="result-heading">Submission result</h3>
<p id="message"></p>
</section>
</form>
HTML
Kehre zu Studio zurück und aktualisiere die Arbeitsseite. Die Beschriftungen müssen auch nach der Eingabe lesbar bleiben. Klicke auf Email, um den Fokus im Feld zu sehen, und drücke dann Tab, um in Dokumentreihenfolge weiterzugehen. Aktiviere Reserve my place bei leerem Formular: Der Browser soll Your name fokussieren und auf die Pflichtangabe hinweisen. Gib ein Zeichen ein und versuche es erneut, um die Mindestlänge zu beobachten. Nutze etwa Morgan Vale; gib not-an-email ein, um die andere Formatablehnung zu sehen. Dies sind native Validierungsmeldungen, keine HTTP-422-Antworten: Der Browser hat noch keine Buchungsanfrage gesendet. Korrigiere einen Wert, indem du bei fokussiertem Feld mit Ctrl+A oder Cmd+A den Text markierst und ersetzt. Ein Tippfehler erfordert keinen VM-Reset.
Die Notiz ist derzeit auch mit ausgewählter Hilfe optional. Dieses konkrete Verhalten ergänzt du als Nächstes. Das Layout ist noch nicht für schmale Bildschirme gestaltet. Selbstkontrolle: Alle fünf Steuerelemente haben sichtbare, verbundene Beschriftungen, die Hilfe bleibt sichtbar und leere Pflichtwerte lassen sich nicht senden.
Lass die Sitzplatznotiz dem Kästchen folgen
Mache die Notiz in diesem Schritt nur dann erforderlich, wenn ein Besucher Sitzplatzhilfe anfordert, und erhalte bereits eingegebenen Text.
Ein Kästchen stellt den booleschen Wert checked bereit: ausgewählt true, sonst false. Eingabefeld und Textbereich haben die zur HTML-Bedingung passende Eigenschaft required. STUDIO ist ein vorbereitetes, von scenario.js geladenes Konfigurationsobjekt; sein noteMin ist hier 5. Lies diesen Wert, statt alle künftigen Workshops für gleich zu halten. Die Konfiguration liefert Szenariodaten, nicht deine bedingte Regel.
querySelector liefert das erste Element zu einem CSS-Selektor; [name="support"] und [name="note"] treffen diese Attribute. Wir wählen die Steuerelemente anhand ihres API-name. Bei jeder Änderung des Kästchens aktualisiert die Funktion zwei native Bedingungen. In condition ? first : second wählt der bedingte Operator bei wahrer Bedingung first, sonst second. Die Mindestlänge beträgt daher bei Hilfe fünf, sonst null. Ein einmaliger Aufruf von updateNote() initialisiert den Zustand beim Laden. Der change-Listener führt sie nach jedem Umschalten erneut aus. Wir ändern Bedingungen, nicht .value; Abwählen löscht deshalb keinen Entwurf.
Ersetze in Workspace validity.js. Der Marker JS funktioniert wie zuvor HTML:
cd /home/labex/project/stillspoke
cat > validity.js <<'JS'
const support = document.querySelector('[name="support"]');
const note = document.querySelector('[name="note"]');
function updateNote() {
note.required = support.checked;
note.minLength = support.checked ? STUDIO.noteMin : 0;
}
support.addEventListener('change', updateNote);
updateNote();
JS
Kehre zu Studio zurück und aktualisiere die Seite. Fülle mit Tab einen mindestens zweistelligen Namen, eine syntaktisch gültige Adresse wie morgan@example.test und Clay, slowly / 10:00 aus. Wähle I need seating assistance mit Space aus. Lass die Notiz leer und aktiviere Reserve my place. Der Browser soll nun Seating note fokussieren und einen Wert anfordern. Gib near ein, verlasse die Notiz mit Tab und versuche erneut zu senden: Vier Zeichen unterschreiten die erforderlichen fünf. minlength gilt für vom Benutzer eingegebenen Text; hier wird normal getippt statt per Skript zugewiesen.
Gehe nach Bedarf mit Shift+Tab zum Kästchen zurück und wähle es mit Space ab. Die Notiz ist optional und near bleibt erhalten. Wähle Hilfe erneut und ersetze die Notiz durch A seat near the entrance. Behalte die Werte für den nächsten Schritt; Aktualisieren verwirft ungesendete Formulareingaben, ein Wechsel der LabEx Tabs lässt diese Browserseite dagegen offen.
Falls das Kästchen wirkungslos erscheint, kehre zu Workspace zurück und zeige die exakt gespeicherte Datei:
cd /home/labex/project/stillspoke
cat validity.js
Vergleiche sie mit dem kurzen Block oben, einschließlich checked und dem abschließenden updateNote();. Ersetze nötigenfalls die Datei mit dem vollständigen Block und aktualisiere Studio. Ein fehlendes Skript oder JavaScript-Tippfehler ist etwas anderes als die native Ablehnung einer leeren Notiz. Dass nichts gebucht wurde, beweist allein nicht, dass die Bedingung funktioniert. Selbstkontrolle: Das Kästchen ändert die Pflichtangabe, kurze getippte Notizen werden nur bei Auswahl abgelehnt und vorhandener Text bleibt erhalten.
Halte das Formular lesbar und den Fokus sichtbar
Beende in diesem Schritt das Layout, erstelle eine echte Buchung auf deiner Arbeitsseite und lies den zugehörigen akzeptierten Datensatz.
Ein zweispaltiges Formular muss zusammenklappen können. 1fr 1fr von CSS Grid gibt Name und E-Mail gleiche Anteile; min-width: 0 erlaubt das Schrumpfen. Bei maximal 800 Pixel Fensterbreite ändert die Media Query dieses Paar auf eine Spalte. width: 100% mit box-sizing: border-box rechnet Innenabstand und Rahmen in die verfügbare Breite ein. input:not([type="checkbox"]) nimmt Kästchen von der Vollbreitenregel aus, damit sie kleine Quadrate bleiben. Text ist ohne Hover verfügbar. Die vorbereitete Hülle ordnet die Geschichte auf kleinen Bildschirmen bereits über dem Formular an; diese Regeln passen dein Formular in den Platz ein.
:focus-visible gibt dem Tastaturfokus einen sichtbaren Umriss. Farbe ist nicht das einzige Signal: Pflichttext, Fehlerworte und Umrissform zählen ebenfalls. Gleichwertige klare Fokusrahmen oder Schatten sind gültig; jede Fokusanzeige zu entfernen ist es nicht. [aria-invalid="true"] gestaltet serverseitig markierte Felder; .error:empty verbirgt nur leere Fehlerabsätze, keine Beschriftung oder notwendige Erklärung. overflow-wrap: anywhere erlaubt den Umbruch langer Bestätigungen oder synthetischer Adressen. Die Einstellung für reduzierte Bewegung vermeidet sanfte Bewegungen für Personen, die weniger Animation wünschen; dieses Formular benötigt keine Animation.
Ersetze in Workspace form.css:
cd /home/labex/project/stillspoke
cat > form.css <<'CSS'
form { margin-top: 28px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { min-width: 0; margin-bottom: 18px; }
label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: bold; }
input:not([type="checkbox"]), select, textarea {
width: 100%; box-sizing: border-box; padding: 11px 12px;
border: 1px solid #89988a; border-radius: 3px;
font: inherit; font-size: 15px; color: #243d35; background: #fcfaf5;
}
small { display: block; margin-top: 6px; font-size: 11px; color: #56645a; }
.check { display: flex; gap: 9px; align-items: center; margin: 20px 0; }
.check input { width: 18px; height: 18px; accent-color: #244c3d; }
button {
padding: 14px 20px; border: 0; border-radius: 3px;
font: inherit; font-size: 14px; color: #fffdf6; background: #254f41; cursor: pointer;
}
button[type="submit"] { width: 100%; display: flex; justify-content: space-between; }
button:disabled { background: #5b6c5e; cursor: wait; }
:focus-visible { outline: 3px solid #ad4d28; outline-offset: 4px; }
[aria-invalid="true"] { border: 2px solid #9d3327; }
.error { color: #963024; font-size: 12px; margin: 5px 0; }
.error:empty { display: none; }
#progress, #message { font-size: 14px; overflow-wrap: anywhere; }
#result { margin-top: 20px; border-top: 1px solid #c9cebf; padding-top: 12px; }
#result h3 { font-size: 15px; margin: 0 0 8px; }
#records article { border-top: 1px solid #c9cebf; overflow-wrap: anywhere; padding: 12px 0; }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
CSS
Kehre zu Studio zurück, aktualisiere und nutze das Arbeitsformular. Gib Morgan Vale und morgan@example.test ein, wähle mit C Clay, slowly / 10:00, mit Space die Hilfe und gib A seat near the entrance ein. Gehe mit Tab zum Absenden und drücke einmal Enter. Warte auf die echte Bestätigung des vorbereiteten Handlers. Dieses erste Lab liefert den Handler; du hast Semantik, Bedingungen und Gestaltung darum implementiert. Das nächste Lab erklärt und erstellt seine Anfrage- und Rückmeldelogik.
Wähle Studio records und finde denselben Namen, dieselbe E-Mail, Uhrzeit und Nummer. Erhalte Existing Visitor und Avery Reed. Ihre Einträge sind unabhängig von deiner Buchung; sie zum Freimachen von Plätzen zu löschen liegt außerhalb der Aufgabe. Der Server setzt die Kapazität durch, nicht ein deaktivierter Button. Wähle danach Back to signup. Die gespeicherte Buchung bleibt im Lab bestehen, auch wenn Aktualisieren ungesendete Felder leert.
Verkleinere Browser oder Studio-Bereich auf etwa 390 Pixel und prüfe eine Tabletbreite nahe 768 Pixel. Kein horizontales Scrollen soll nötig sein; Beschriftungen und Hilfe bleiben sichtbar und Name/E-Mail stehen untereinander. Gehe mit Tab durch alle Steuerelemente: Jedes fokussierte Element braucht eine sichtbare Anzeige. Stelle eine breite Ansicht wieder her und prüfe die zwei Spalten. Verbirg kein schwieriges Feld, um Platz zu schaffen.
Bleibt das alte Layout, prüfe, ob du form.css in /home/labex/project/stillspoke statt base.css geschrieben hast, und aktualisiere. Ein falscher Pfad erfordert keinen VM-Reset. Selbstkontrolle: Besucher können auf schmalen und breiten Ansichten alles lesen und bedienen, die echte Arbeitsbuchung steht in den Datensätzen und vorhandene Besucher bleiben. Die Lab-Prüfung liest den echten Zustand und führt eine unveränderte Kopie deiner Dateien mit temporären isolierten Daten aus; sie sendet dein Live-Formular nie für dich.
Zusammenfassung
Du hast sichtbare Beschriftungen, native Bedingungen und Hilfe mit echten Steuerelementen verbunden, die Sitzplatznotiz ohne Eingabeverlust bedingt gemacht und ein responsives Layout mit sichtbarem Tastaturfokus gebaut. Nach dem unabhängigen Beispiel hast du eine echte Arbeitsbuchung erstellt und ihre Bestätigung mit den akzeptierten Datensätzen abgeglichen. Das nächste unabhängige Lab erstellt den Anfrage- und Rückmeldehandler.