HTML Forms Basics: form, label, input and button

HTML forms let users send information to a website. Learn the form, label, input and button elements, GET vs POST, the name attribute, and build a complete contact form.

What is an HTML form?

A form is the part of a web page where users type or choose information and send it. Login boxes, search bars, sign-up pages and checkout pages are all forms. A paper form at the doctor's office is a good comparison: it has labelled boxes, you fill them in, and you hand it in at the desk.

In HTML, a form is made of a few key elements:

• <form> wraps all the fields and says where to send the data.
• <label> is the text that describes a field.
• <input> is a field the user types into or clicks.
• <button> sends the form.

The form element: action and method

The <form> element has two important attributes.

action is the URL where the data is sent, usually a page or script on your server that handles it. HTML alone cannot save or email data. You need a server-side program (written in PHP, Node.js, Python and so on) or a form service to receive it.

method says how the data is sent:

• method="get" puts the data in the URL, like search?q=shoes. Use it for searches and filters, where it is useful to bookmark or share the result. Never use it for passwords or private data.
• method="post" sends the data hidden inside the request, not in the URL. Use it for anything that creates or changes something: contact forms, sign-ups, logins, orders.

If you leave out method, the browser uses GET.

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

You will see a label, a text box and a "Search" button. If you type "mugs" and press the button, the browser goes to /search?q=mugs. The q comes from the field's name.

Labels, ids and the name attribute

Every field needs a label. To connect them, give the input an id and give the label a matching for attribute. Now clicking the label puts the cursor in the field, and screen readers read the label when the field gets focus.

The name attribute is different. It is the key that is sent to the server with the value, like a label on a box in the post. Without a name, the field's value is not sent at all.

• id connects the field to its <label> (and to CSS or JavaScript). It must be unique on the page.
• name is the field's name in the data sent to the server.

They often have the same value, and that's fine.

Common mistake: Forgetting the name attribute. The form looks perfect, but the server receives nothing from that field. Check every input has a name.

Button types: submit, reset and button

The <button> element has a type attribute:

• type="submit" sends the form. This is the default inside a form.
• type="reset" clears every field back to its starting value. It is rarely helpful and easy to click by accident, so most sites don't use it.
• type="button" does nothing by itself. It is used with JavaScript.

Always write the type so your intent is clear. You may also see <input type="submit">, which works, but <button> is more flexible because it can contain other HTML, like an icon.

A complete HTML contact form example

Here is a real contact form you can copy and use.

<form action="/contact" method="post">
  <p>
    <label for="name">Your name</label><br>
    <input type="text" id="name" name="name" autocomplete="name">
  </p>

  <p>
    <label for="email">Email address</label><br>
    <input type="email" id="email" name="email" autocomplete="email">
  </p>

  <p>
    <label for="subject">Subject</label><br>
    <input type="text" id="subject" name="subject">
  </p>

  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="6"></textarea>
  </p>

  <p>
    <button type="submit">Send message</button>
  </p>
</form>

You will see four labelled fields stacked on top of each other and a "Send message" button. When the user clicks the button, the browser sends name, email, subject and message to /contact using POST. The <textarea> is a multi-line text box; you will learn more about it soon. The <br> tags only put each label above its field until you add CSS.

Tip: You can also wrap the input inside the label: <label>Your name <input type="text" name="name"></label>. This connects them without for and id. Both ways are correct; the for/id way gives you more freedom for layout.

Practice exercise

Build a newsletter sign-up form that uses POST and sends data to /subscribe. It should have a "First name" field, an "Email" field and a "Subscribe" button. Every field needs a label connected with for and id, and a name.

Hint: Click each label in the browser. If the cursor jumps into the right field, your labels are connected correctly.

Frequently asked questions

Can HTML send an email by itself?

No. HTML only collects the data and sends it to the action URL. A program on the server, or an online form service, must receive the data and send the email.

What is the difference between id and name?

id is for the page: it connects a label and must be unique. name is for the server: it is the key sent with the field's value.

Should I use GET or POST for a login form?

Always POST. With GET, the password would appear in the URL, the browser history and server logs.

Key takeaways

• The <form> element's action says where data goes, and method says how (GET or POST).
• Use GET for searches and POST for anything private or that changes data.
• Connect each <label> to its field with for and id.
• Every field needs a name, or its value is not sent.
• Write type="submit" or type="button" on every button.