HTML Essentials

Forms

Collect user input in a clear, accessible form.

A form groups controls that collect and submit information. Every control needs a useful label.

How submission works

The action chooses a destination and the method chooses how values are sent.

Important definitions

Form: A group of controls for user input.
Label: Text programmatically connected to a control.
Name: The key used when a value is submitted.

Syntax

Use this general pattern as a reference:

HTML

<form action="/save" method="post">...</form>

Examples

Forms worked example

EXAMPLE 1

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Join</button>
</form>

ResultA labeled email field and a Join button.

COMPLETE EXAMPLE

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Join</button>
</form>

Try it yourself

Expected output

A labeled email field and a Join button.

Note

Client-side validation improves feedback but never replaces server validation.

Tip

Keep forms short and explain required information.

Common mistakes

Using placeholder text instead of a label.
Forgetting name attributes.
Trusting submitted values without validation.

Practice exerciseApply what you learned Take the quizCheck your understanding