Web Design & Development · HTML

WDD5 - HTML: forms and input types

Thu 19 Nov 2026 · P3+P4 (double)

~120 minutes

Learning intentions

I can build a simple HTML form using the required Higher input controls.
I can explain how id, name, labels and input types support form design.
I can apply HTML validation for range, length, presence and pre-selected data.

Success criteria

I can use <form>, <input>, <select>, <textarea> and submit controls correctly.
I can choose between text, number, radio, textarea and submit for a given field.
I can add required, min, max, minlength, maxlength, checked and selected where appropriate.

Warm up - from wireframe to form controls

WDD3 planned the workshop enquiry form. WDD5 implements its controls in HTML.

WU1

Which form control is best for a longer "additional information" answer?

<input type="radio">
Radio buttons are for choosing one option from a group.
<input type="submit">
Submit sends the form.
<textarea>
Correct. Textarea is used for multi-line text.
<select>
Select is for choosing from a drop-down list.

WU2

Which attribute makes a field mandatory?

WU3

Which pair of attributes connects a <label> to its matching <input>?

name on the label and value on the input
Name and value describe the submitted data, not the label link.
for on the label, matching id on the input
Correct. The label's for attribute must match the input's id.
The same class on both elements
Class is for styling, not for connecting a label to a control.
placeholder and required
Neither of these connects a label to an input.

Key vocabulary

<form>

The container for controls that collect user input.

<input>

A form control whose behaviour depends on its type attribute.

A unique identifier for an element, often used to connect a label to a control.

A drop-down list of options.

A multi-line text input area.

Validation

Checking that user input meets rules before it is accepted.

Building forms

Required Higher input controls

The mandatory Higher input list is text, number, textarea, radio and submit. A form may also use <select> and <option> for drop-down choices. The date input type is useful in real websites, but it is extension-only in this course, not core Higher content.

text

Short typed text, such as school name or teacher email.

number

Numeric values, such as class size.

radio

One choice from a small group of options.

textarea

Longer free-text answers.

select

A drop-down list where one option is chosen.

submit

A button that sends the form.

Validation types

HTML can check simple rules before a form is submitted: presence with required, range with min and max, length with minlength and maxlength, and pre-selected data with checked or selected.

School name

text input · required · maxlength 60

Class size

number input · min 1 · max 33

Workshop type

radio group · one option checked

Extra notes

textarea · maxlength 300

Send

submit enquiry

Worked examples

Example 1 - Basic text and number inputs

<form action="send.html">
  <label for="schoolName">School name</label>
  <input type="text" id="schoolName" name="schoolName" required maxlength="60">

  <label for="classSize">Class size</label>
  <input type="number" id="classSize" name="classSize" required min="1" max="33">

  <input type="submit" value="Send enquiry">
</form>

The text field has presence and length validation. The number field has presence and range validation.

Example 2 - Radio buttons and pre-selected data

<p>Workshop type</p>

<input type="radio" id="habitats" name="workshop" value="habitats" checked>
<label for="habitats">Habitats</label>

<input type="radio" id="adaptations" name="workshop" value="adaptations">
<label for="adaptations">Adaptations</label>

Both radio buttons share the same name, so only one can be selected.

checked makes "Habitats" pre-selected.

Example 3 - Select and textarea

<label for="yearGroup">Year group</label>
<select id="yearGroup" name="yearGroup" required>
  <option value="">Choose a year group</option>
  <option value="p5">Primary 5</option>
  <option value="p6" selected>Primary 6</option>
  <option value="p7">Primary 7</option>
</select>

<label for="notes">Additional notes</label>
<textarea id="notes" name="notes" maxlength="300"></textarea>

The empty first option prevents a required drop-down from accidentally accepting a real answer. The selected attribute can pre-select data when appropriate.

Now you try

Choose the best control and validation for each field: teacher email, class size, workshop type, extra notes and submit button.

Teacher email: input type="text", required, sensible maxlength
Class size: input type="number", required, min and max
Workshop type: radio buttons sharing the same name
Extra notes: <textarea> with maxlength
Submit button: input type="submit"

Common mistakes

Using JavaScript for this lesson's validation. Higher form validation here is HTML attributes: required, min, max, minlength, maxlength, checked and selected.
Giving radio buttons different names. Radio buttons in one group must share the same name.
Forgetting an empty first option in a required select. Without it, the browser may accept the first real option automatically.
Using type="date" as core content. It is useful, but extension-only for this course.
Confusing id and name. id identifies one element; name is the field name submitted with the form.

Exam tip

If asked about form validation, name the validation type and the matching HTML attribute: presence uses required, range uses min/max, length uses minlength/maxlength, and pre-selected data uses checked or selected.

Task Set A - Core questions

Task Set B - Extension

Optional: useful in real forms, but not core Higher input-type content.

Explain why type="date" might be useful in the workshop form, and why it is not treated as core Higher content here.

One possible answer

A pupil's form has one <input type="radio"> for "Yes" and a separate, differently-named <input type="radio"> for "No", intended to be mutually exclusive options for the same question. Explain what is wrong with this and how to fix it.

One possible answer

HTML attributes such as required and maxlength provide client-side validation, checked in the browser before the form is even submitted. Explain one reason a real website might still repeat similar checks on the server after the form is submitted, even though the client-side check already ran.

One possible answer

File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD5

Teacher notes - Shift+T to toggle

Suggested timing: 8 min warm up, 18 min controls and vocabulary, 25 min worked examples, 15 min now-you-try/live coding, 35 min Task Set A, remaining time Task Set B.

Scope control: validation here is HTML attribute validation, not JavaScript. JavaScript begins in WDD11.

Date input: keep type="date" in Task Set B only. It is not in the mandatory Higher input list.

WDD5 - HTML Forms and Input Types

WDD5 - HTML: forms and input types

Key vocabulary

Building forms

Required Higher input controls

Validation types

Worked examples

Task Set A - Core questions

Task Set B - Extension