HTML Form Validation: Build an Accessible Course Enquiry Form

Practical Web Development — Lesson 1 of 10 · Beginner

A course enquiry form should tell a learner what information to enter, catch simple mistakes and explain whether anything was sent. This tutorial builds a local demonstration with native HTML controls. It does not send enquiries to a real inbox. Save the example as index.html and open it in a browser.

Start with labels and useful constraints

Each visible label points to one input through matching for and id values. A placeholder is not a substitute: it disappears while someone types. Required fields are identified in the label, and the optional message has a length limit. Only collect information you need to answer the question.

<!doctype html>
<html lang="en"><meta charset="utf-8">
<title>Course enquiry demo</title>
<form id="enquiry">
  <p><label for="email">Email (required)</label>
  <input id="email" name="email" type="email" autocomplete="email" required></p>
  <p><label for="course">Course (required)</label>
  <select id="course" name="course" required>
    <option value="">Choose a course</option>
    <option value="html">HTML fundamentals</option>
    <option value="js">JavaScript fundamentals</option>
  </select></p>
  <p><label for="message">Your question (optional, 500 characters maximum)</label>
  <textarea id="message" name="message" maxlength="500"></textarea></p>
  <button type="submit">Check enquiry</button>
</form>
<p id="result" role="status"></p>
<script>
const form = document.querySelector('#enquiry');
form.addEventListener('submit', event => {
  event.preventDefault();
  const data = new FormData(form);
  document.querySelector('#result').textContent =
    'Demo only: your ' + data.get('course') + ' enquiry is valid. Nothing was sent.';
});
</script></html>

Understand when the code runs

The browser checks native constraints before dispatching this submit event. An empty required email or course selection prevents this handler from running. A valid email shape does not prove that the mailbox exists. We use textContent to display a plain message, so entered text is not interpreted as HTML.

The status region starts in the document before its text changes. This gives assistive technology a place to announce feedback without moving keyboard focus unexpectedly. Keep the form values after a validation failure; erasing them makes correction unnecessarily difficult.

Test behaviour, not just appearance

1. Press Tab through the controls and submit with the keyboard.
2. Submit an empty form: the browser should identify the first invalid field.
3. Enter an invalid email, then a valid-shaped address and a course.
4. Verify the success text explicitly says nothing was sent.
5. Zoom the page and check that labels and controls remain usable.

Connect a real service carefully

For a production endpoint, validate the same rules on the server, handle delivery failures and show success only after an accepted response. Browser validation improves feedback but can be bypassed. Add abuse protection appropriate to the service. Never put a mail provider secret in browser JavaScript.

Practice

Add a preferred learning level using a fieldset and legend. Keep it optional and ensure the form still works by keyboard. Write down the expected result for both a selected level and no selection before changing the code.

Continue learning

Review our semantic HTML project, JavaScript course filter and course platform architecture.

Reference: Technical documentation for this lesson. Examples are learning exercises; test them in your environment.