Tasks

<h1>Exam Entry Form</h1> and all elements after it are displayed in the browser as they are displayed elements. Tables are being used to align the elements (how 1993); additionally, the <title>Exam entry</title> tag in the header tells the browser the title of the webpage ('Exam entry')
The submit button calls validateForm() to determine whether or not the form may be submitted - if it returns true then the form gets submitted, else it is disallowed. validateForm() performs the following actions:
- Check that document.ExamEntry.name (the 'name' input box) is not empty - and if it is, to recolour the label red and focus the input box for input
- Check that document.ExamEntry.subject (the 'subject' input box) is not empty - and if it is, to recolour the label red and focus the input box for input
- If either of the two checks failed, alert the user as to what went wrong - and prevent form submission; else, allow the form to be submitted
When the 'Submit' button is clicked, its onclick attribute is evaluated to determine whether the form may be submitted; a return value of true (or any equivalent value due to type coercion) allows the form to be submitted while a value of false (oe) prevents it.

>  // HTML //
  SPAN
      LABEL[ID="elabel" FOR="examNo"]
          Examination number
      END LABEL
      INPUT[NAME="examNo" TYPE="number" ID="examNo"]
  END SPAN

>  // SCRIPT //
  CALL registerValidateEmpty WITH (CALL document.getElementById WITH "examNo"), document.ExamEntry.examNo, "your examination number"

>  // SCRIPT //
  CALL registerValidateLen WITH (CALL document.getElementById WITH "examNo"), document.ExamEntry.examNo, "your examination number", 4

> // HTML //
 SPAN
     LABEL[ID="llabel"]
         Qualification level
     END LABEL
     BREAK
     LABEL[FOR="gcse"]
         GCSE
     END LABEL
     INPUT[ID="gcse" NAME="level" TYPE="radio" VALUE="GCSE"]
     LABEL[FOR="as"]
         AS
     END LABEL
     INPUT[ID="as" NAME="level" TYPE="radio" VALUE="AS"]
     LABEL[FOR="a2"]
         A2
     END LABEL
     INPUT[ID="a2" NAME="level" TYPE="radio" VALUE="A2"]
 END SPAN
 // SCRIPT //
 CALL registerCustomHook WITH ANONF <- ARRAY msg, ARRAY timeoutFuncs -> BOOL AS
     IF document.ExamEntry.level.value DO
         SET rv TO CALL confirm WITH "Did you select "+document.ExamEntry.level.value+" level?"
         IF rv == FALSE DO
             SET msg[0] TO msg[0] + "Select your qualification level\n";
             SET (CALL document.getElementById WITH "llabel").style.color TO "red"
             timeoutFuncs.append(ANONP AS SET (CALL document.getElementById WITH "llabel").style.color TO "black")
         END IF
     ELSE DO
         SET msg[0] TO msg[0] + "You must select a qualification level\n";
         SET (CALL document.getElementById WITH "llabel").style.color TO "red"
         timeoutFuncs.append(ANONP AS SET (CALL document.getElementById WITH "llabel").style.color TO "black")
         SET rv TO FALSE
     END IF
 RETURN rv

My solutions are fit for purpose and allow for good styling. They allow for easy expansion of the webpage to incorporate more forms and checks; easy 'empty' and 'length' checks or more powerful custom hooks using user javascript
JavaScript validation routines are very effective at reducing the number of errors that are made in data input, as they entirely prevent the submission of data without all data being valid

Webpage:

Exam Entry Form