Build form structure inside the persistent Creative portfolio: Form structure starter project.
Forms and validation
formlabelinputrequiredaria-describedby
Add the exact form and connected h2 for Form structure. The lab uses no action or submission method.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
Add the exact form and connected h2 for Form structure. The lab uses no action or submission method.
Target index.html · Replace the placeholder inside main. Evidence The form-like practice region has an accessible name and no destination. Snippet<form aria-labelledby="form-title" novalidate>
<h2 id="form-title">Form structure</h2>
</form>
Next up
Add the exact label, email input, required state, and described help text.
Target index.html · Inside the form after its h2. Evidence The label for, input id, and help id relationships all match. Snippet<label for="field-form-structure">Email for course notes</label>
<input id="field-form-structure" name="email" type="email" required aria-describedby="field-form-structure-help">
<p id="field-form-structure-help">Use a complete email address.</p>
Next up
Add the exact status message and type=button control, then Run and Check.
Target index.html · After the help text inside the form. Evidence A status region and non-submitting button provide a clear simulated outcome. Snippet<p id="field-form-structure-status" role="status">Ready to review locally.</p>
<button type="button" aria-describedby="field-form-structure-status">Review details</button>
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped form structure build while preserving each passing edit.
Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.
Forms and validation becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
form / label / input
Build form structure with labels and validation hints.