You can now name and describe a page; next, use HTML to collect answers. The crew has found the Meridian Relay. Its intake form must clearly identify each answer before a new operator can request training.
A completed relay intake form with labels connected to text, email, and password inputs.
<label for="crew-contact">Crew contact</label>
<input type="text" id="crew-contact" name="crew-contact" required />
The label’s for value matches the input’s id, so clicking the label focuses the right field.
Run the page and click each label. The matching field receives focus. The button is the form’s clear submit action. The /relay-intake address is illustrative; this preview has no server to receive a real request.
Use the preview to connect each visible result to the HTML that created it. This is a completed demonstration, so you do not need to edit the code.
Continue to Exercise: Build a Night-Shift Check-In. You will recreate the same idea from a smaller starter file.
MDN’s official documentation explains how a label is associated with its form control and why that connection matters for usability and accessibility. Read MDN’s reference for the <label> element when you want to go further.
This is a completed demo. Run the preview, then read the matching code.