LESSON 16

Forms

Learning objective: Collect user input with a basic HTML form.

Understand

Forms let visitors send information to a site.

A <form> wraps input controls. Each control usually has an <input> and a <label>. The action attribute says where data goes and method says how it is sent. For now, focus on the structure — the fields, a label per field, and a submit button.

Analogy: A form is like a paper questionnaire: labelled boxes to fill in, then a button to hand it in.

See It in Action

A minimal form:

<form>
  <label>Name: <input type="text" name="name"></label>
  <button type="submit">Send</button>
</form>
How it works: The <form> groups the controls, the <input> collects text, and the submit <button> is what the user presses to send the form.

Try It Yourself

  1. Create a form with a text input for a name.
  2. Add a submit button.
  3. Add a second input for an email.

Quick Quiz

What wraps all the controls of a form?

Challenge

Build a simple contact form with a name field, message field, and submit button.

Success condition: Your form shows labelled fields and a working submit button.