Published lesson · 30 minutes

Make forms understandable

Objective: Label form controls and explain required information so people can complete a simple form.

Understand the idea

Make forms understandable works best when the learner can explain the reason behind each step, not just copy a result. A label gives a form control a name that assistive technology and voice input can use; help text and clear errors explain how to fix a problem.

An event enquiry form asks for a name, a reply method and a question. Each field has a visible label and the page explains which fields are required. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Use a label associated with each input, choose an input type that matches the data, group related choices and put concise instructions before the form. Write down the important decision before you begin so another person can follow the reasoning.

Test by clicking each label, using Tab and Shift+Tab, and checking that a missing required value has a clear explanation. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Sketch a two-field form and write its labels, instructions and one helpful validation message. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Make forms understandable: practice example

Explore how make forms understandable supports the lesson objective with a small synthetic example.

index.html

<form><label for="topic">What would you like to ask?</label><input id="topic" name="topic" required><p id="help">Do not include private information.</p><button type="submit">Send practice enquiry</button></form>

Practice tasks

  1. Explore make forms understandable

    Use the worked example for “Make forms understandable”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a HTML practice example

    Create a small practice result that demonstrates this objective: Label form controls and explain required information so people can complete a simple form. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Make forms understandable” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Make forms understandable becomes easier when you use a label associated with each input, check the result and explain the choice to another learner.

Course overview