Forms

Learning objectives#

• Create a form with action and method
• Connect every input to a <label>
• Use text inputs, textarea, select, radio buttons and checkboxes
• Group related fields with <fieldset> and <legend>
• Explain the name attribute and GET vs POST

Explanation#

<form action="/signup" method="post"> wraps the fields. action is where the data is sent; method is how.

GET puts the data in the URL (?q=shoes) — good for searches you can bookmark. POST sends it in the request body — use it for logins, payments and anything that changes data.

Each field needs a name. The browser sends name=value pairs; without a name the field is not sent at all.

<label for="id"> connects text to a field. Clicking the label focuses the field, and screen readers read the label aloud.

Radio buttons with the same name form a group where only one can be chosen. Checkboxes are independent on/off choices.

Syntax#

1<form action="/submit" method="post">
2  <label for="x">Label</label>
3  <input id="x" name="x">
4  <button type="submit">Send</button>
5</form>

Code example: A complete contact form#

1<style>
2  form { font-family: sans-serif; max-width: 320px; }
3  label, legend { display: block; margin-top: 10px; }
4  input:not([type=radio]):not([type=checkbox]), select, textarea { width: 100%; }
5</style>
6<form action="https://httpbin.org/post" method="post">
7  <label for="name">Full name</label>
8  <input id="name" name="name" autocomplete="name" required>
9

10  <label for="topic">Topic</label>
11  <select id="topic" name="topic">
12    <option value="">Choose…</option>
13    <option value="sales">Sales</option>
14    <option value="support">Support</option>
15  </select>
16

17  <fieldset>
18    <legend>Preferred contact</legend>
19    <label><input type="radio" name="contact" value="email" checked> Email</label>
20    <label><input type="radio" name="contact" value="phone"> Phone</label>
21  </fieldset>
22

23  <label for="msg">Message</label>
24  <textarea id="msg" name="message" rows="4"></textarea>
25

26  <label><input type="checkbox" name="newsletter" value="yes"> Send me updates</label>
27

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

A contact form with a name field, a topic dropdown, two radio options, a message box, a checkbox and a submit button.

Step-by-step explanation#

1. The form posts to httpbin.org, a test service that echoes back what it receives.
2. Each <label for> matches an input id.
3. <select> creates a dropdown; each <option> has a value that is sent.
4. The two radio buttons share name="contact", so only one can be selected. checked makes Email the default.
5. <fieldset> and <legend> group the radios under a common question.
6. <textarea> is a multi-line text box.
7. Wrapping an input inside its <label> is another valid way to link them.
8. <button type="submit"> sends the form.

Real-world use case#

Common mistakes#

Best practices#

• Every field gets a visible <label>
• Use POST for anything private or that changes data
• Add autocomplete hints (name, email, tel) to help browsers fill fields
• Use <button type="submit">, and type="button" for non-submit buttons inside forms

Remember this#

Practice exercise#

1<form action="/login" method="post">
2  <label for="user">Username</label>
3  <input id="user" name="username" autocomplete="username" required>
4

5  <label for="pass">Password</label>
6  <input id="pass" name="password" type="password" autocomplete="current-password" required>
7

8  <label><input type="checkbox" name="remember" value="1"> Remember me</label>
9  <button type="submit">Log in</button>
10</form>

Mini quiz#

Want more? Practise all HTML MCQs · HTML interview questions

Related topics#

My notes#

Saved in this browser.