Make a Form People Can Understand

Start with the question

A form asks a person for information. State why you need it and collect only what is necessary. The visible label should remain available after typing, so a placeholder is not a replacement for a label. Give related controls a logical order that works without a mouse.

Connect the label

A label with for="email" associates with an input whose id is email. The name determines the field key when a browser submits form data. These attributes serve different purposes. Use type="email" for an email field so browsers can offer suitable input assistance.

Validation has layers

The required attribute can stop an empty browser submission. It does not establish that a mailbox exists or that the person owns it. A real application must validate on its server, handle errors accessibly and protect requests where needed. Never depend on browser checks for authorization or data integrity.

Review the experience

Run the example, click the Email label and verify that the field receives focus. Try keyboard navigation. The preview intentionally does not submit to a server. For a real project, test successful submission, unavailable service, invalid data and duplicate attempts with appropriate feedback.

Project checkpoint

Combine your document, navigation and form in the contact-page project. Write a clear privacy explanation and an error summary. Test that every field has a label and that the submit button describes its action. Review the page with keyboard navigation and at a narrow viewport before calling it finished.

Read the example

<form>
<label for="email">Email address</label>
<input id="email" name="email" type="email" required>
<button type="submit">Request information</button>
</form>

Line-by-line explanation

1. for and id connect label and input.
2. name supplies the submitted field key.
3. required checks for a missing browser value.
4. type="submit" states the button action.

Expected output

A labelled email field and a submit button. Submission is disabled in this preview.

Common mistakes to avoid

• Using placeholders as the only labels
• Assuming required makes server validation unnecessary
• Collecting extra personal data without a reason

Summary & next step

• Can you now associate a label with an input?
• Can you now use appropriate input types?
• Can you now explain what client-side validation cannot prove?

Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.

Related BizAIPro tools