Forms and debugging

What is a form?

See how the form element collects named values and sends them to a server, while leaving controls and validation to the Forms course.

6 minute lesson

~~~

A form lets a visitor submit information.

FORMEMAILMESSAGESUBMITHTTP REQUEST[email protected]message=HelloSERVER
A form collects name-value pairs and sends them to a server.
<form action="/newsletter/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <button>Subscribe</button>
</form>

The form element groups the controls.

action is the URL that receives the submission. method is the HTTP method. Forms use GET by default; this example uses POST because it asks the server to change subscription state.

The input’s name becomes the name sent to the server. Its current value becomes the corresponding value. An input without a name is not included in a normal form submission.

The label names the control for everyone and gives it a larger clickable target. Its for value matches the input’s id.

Forms deserve their own course because this small example opens many questions: which control to use, validation, errors, files, FormData, JavaScript submission, and server-side safety.

For now, understand where forms fit in an HTML document. We will go much deeper in the Web Forms Course when it is published.

Quick check

Result

You got of right.

Lesson completed