Your first form

What forms do

Almost everything interactive on the web starts with a form: logging in, searching, signing up, ordering food, writing a comment. A form gathers values from the visitor and, when they press the submit button, sends them to an address.

An important thing to understand from the start: HTML builds the form, but a server has to receive the data. The form on your own computer will happily "submit", but nothing will store or answer it unless a program is waiting at the other end. Back-end programming is a different subject. This lesson is about building the form correctly.

A first form

<form action="/subscribe" method="post">
  <p>
    <label for="email">Your email</label><br>
    <input type="email" id="email" name="email" placeholder="you@example.com">
  </p>
  <button type="submit">Subscribe</button>
</form>

(In this sandbox the form cannot send anything, so pressing the button does nothing. On a real site it would send the email to /subscribe.)

Take the parts one by one.

The form element

<form> wraps all the fields that belong together. It has two key attributes:

• action is the address that receives the data.
• method is how it is sent: get or post.

The input element

<input> is a void element (no closing tag) and the most flexible one in HTML. Its type decides what it is: text box, email field, checkbox and so on; the next lesson covers them. For now:

• type="email" gives an email field with built-in checking and a suitable keyboard on phones.
• id="email" is a unique label for the field on this page.
• name="email" is the name under which the value is sent. A field without a name is not submitted.
• placeholder is a hint shown while the box is empty. It is not a replacement for a label.

The label element

<label for="email"> is connected to the input whose id is email. Clicking the label puts the cursor in the field, and screen readers announce the label when the field is focused. Never skip it.

The button

<button type="submit"> sends the form. It is the default type inside a form, but writing it out makes your intention clear. A type="reset" button clears the fields, and type="button" does nothing by itself (used with scripts).

GET and POST

Imagine the form above is a search box with a field named q.

• With method="get", the browser builds an address like /search?q=bread and loads it. The data is visible in the URL, can be bookmarked and shared, and is saved in the browser history. This is right for searches and filters.
• With method="post", the data is placed in the body of the request, not in the address. Use it for anything that changes something (an order, a sign-up) or that should not appear in a URL (passwords, personal details).

POST is not encryption. To protect the data in transit, the site must use HTTPS, which hides both kinds.

Grouping with a full example

<form action="/contact" method="post">
  <p>
    <label for="fullname">Full name</label><br>
    <input type="text" id="fullname" name="fullname" required>
  </p>
  <p>
    <label for="mail">Email</label><br>
    <input type="email" id="mail" name="email" required>
  </p>
  <p>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="30"></textarea>
  </p>
  <button type="submit">Send</button>
</form>

If a visitor typed "Asha", "asha@example.com" and "Hello", the browser would send:

fullname=Asha&email=asha%40example.com&message=Hello

Names and values are joined with = and separated by &; special characters are encoded. This is what a server receives and reads by name.

Common mistakes

• No name on an input, so its value is silently left out.
• Using placeholder instead of a label. The hint disappears as soon as someone types, and many screen readers ignore it.
• for and id that do not match, so the label is not connected.
• Using GET for a password form. The password lands in the address bar and the history.
• Expecting HTML alone to save the data. You need a server (or a form service) to receive it.

Exercise

Write a search form that sends one field called q to /search using GET. It should have a label, a search input, and a button that says "Search".

<form action="/search" method="get">
  <label for="q">Search the site</label>
  <input type="search" id="q" name="q">
  <button type="submit">Search</button>
</form>