Topic 4: Form, Buttons

📖 11 min read · 🎯 intermediate · 🧭 Prerequisites: php-with-select-fetch, div-positioning

Why this matters

Think about the last time you searched on Google, logged into Instagram, or paid for something online. Every single one of those moments came down to a form — a text box, a button, and the invisible plumbing connecting them. As a developer, forms are how your app listens to users. Without them, your site is just a poster on a wall. In this lesson, we'll break down the <form> tag, see how it collects data, and learn all three button types — submit, reset, and plain JavaScript — so your UI doesn't just look good, it actually works.

What You'll Learn

• How to structure an HTML form with the <form> tag, including the action and method attributes
• How to build labeled text and email inputs that pair correctly with their <label> elements
• The three button types — submit, reset, and button — and when to reach for each one
• How to attach a JavaScript call to a plain <button type="button"> element

The Analogy

Picture organising a community picnic. You need a sign-up sheet on a clipboard: a dedicated place where people write their name, note any dietary restrictions, and tick which dishes they're bringing. The clipboard is the <form> — it holds everything together. Each blank line on the sheet is an <input>. The "DONE — hand sheet to organiser" instruction at the bottom is the submit button, the "start over" eraser is the reset button, and the little bell you ring to tell everyone the sheet is ready is your custom JavaScript button. Nothing leaves the clipboard until someone explicitly picks it up and carries it to the organiser — that carry action is the HTTP request.

Chapter 1: The <form> Tag and Its Key Attributes

Every HTML form begins and ends with a <form> tag. Everything between those tags — inputs, selects, textareas, buttons — belongs to that form and travels together when the form is submitted.

Two attributes define where data goes and how it travels:

• method="post" — sends data in the HTTP request body; used for sensitive or large data (passwords, files, registration details).
• method="get" — appends data to the URL as query parameters; fine for search forms where bookmarkable URLs are useful.

<form action="/submit-your-data" method="post">
  <!-- inputs and buttons go here -->
</form>

Labels and Inputs

Every visible input should have a paired <label>. The for attribute on the label must match the id attribute on the input. This linkage improves accessibility (screen readers announce the label when the field is focused) and makes the label clickable to focus the field.

<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

<label for="email">Email:</label>
<input type="email" id="email" name="user_email">

• id — uniquely identifies the element on the page; used by <label for="...">.
• name — the key sent to the server. When the form submits, the server receives user_name=Alice&user_email=alice@example.com.
• type="text" — a plain single-line text field.
• type="email" — a text field that validates email format on the browser side before submission.

A Basic Working Form

<form action="/submit-your-data" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="user_email">

  <input type="submit" value="Register">
</form>

Note: <input type="submit" value="Register"> is a self-closing submit trigger — the value attribute sets the visible button text.

Chapter 2: The Three Button Types

Buttons are the gatekeepers of your form. Their type attribute determines what happens on click. Get it wrong and a "Download PDF" button accidentally submits your registration form.

1. Submit Button

The submit button sends all form data to the URL specified in action.

<button type="submit">Submit</button>

• type="submit" is the default for <button> elements inside a <form>. If you omit type, most browsers treat it as submit — which is why mysterious accidental submissions happen. Always declare type explicitly.

2. Reset Button

The reset button clears every field in the form back to its default value in one click — no JavaScript needed.

<button type="reset">Reset</button>

• type="reset" walks every input, select, and textarea in the parent form and restores the value to whatever was in the HTML at page load (or the value/selected/checked attribute if one was set).
• Use with care: users sometimes hit reset by mistake and lose work. Consider a confirmation dialog for long forms.

3. Plain Button (for JavaScript)

When you want to trigger client-side logic without submitting or clearing the form, use type="button".

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

• type="button" explicitly opts the button out of any form interaction. It will not submit, will not reset, and will not interfere with form validation.
• The onclick attribute accepts any valid JavaScript expression. For real-world code, attach event listeners in a <script> block rather than inline onclick — but inline attributes work fine for quick demos.

Side-by-Side Comparison

<form action="/register" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <!-- Sends form data to /register -->
  <button type="submit">Submit</button>

  <!-- Clears all fields -->
  <button type="reset">Reset</button>

  <!-- Runs JavaScript, touches nothing else -->
  <button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>

Chapter 3: Using Buttons Effectively

Styling with CSS

A bare <button> inherits browser-default styles. CSS brings it to life:

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"] {
  background-color: #007bff;
  color: white;
}

button[type="reset"] {
  background-color: #6c757d;
  color: white;
}

button[type="button"] {
  background-color: #28a745;
  color: white;
}

Wiring JavaScript Properly

For production code, avoid inline onclick. Instead, select the button in a <script> block and attach a listener:

<button type="button" id="welcomeBtn">Show Welcome</button>

<script>
  document.getElementById('welcomeBtn').addEventListener('click', function () {
    alert('Welcome to the workshop!');
  });
</script>

This separates behaviour from markup, making both easier to maintain.

Chapter 4: Putting It Together — Workshop Registration Form

Here is a complete form that combines all the concepts above: labeled inputs, a select for session choice, all three button types, and a JavaScript welcome message.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Workshop Registration</title>
  <style>
    form { display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
    label { font-weight: bold; }
    input, select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; }
    button[type="submit"] { background: #007bff; color: #fff; }
    button[type="reset"]  { background: #6c757d; color: #fff; }
    button[type="button"] { background: #28a745; color: #fff; }
  </style>
</head>
<body>

<form action="/submit-your-data" method="post">

  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name" placeholder="Alice Smith">

  <label for="email">Email:</label>
  <input type="email" id="email" name="user_email" placeholder="alice@example.com">

  <label for="session">Session:</label>
  <select id="session" name="session">
    <option value="html-css">HTML & CSS Fundamentals</option>
    <option value="js">JavaScript Deep Dive</option>
    <option value="php-mysql">PHP & MySQL</option>
  </select>

  <button type="submit">Register</button>
  <button type="reset">Clear Form</button>
  <button type="button" id="welcomeBtn">Show Welcome Message</button>

</form>

<script>
  document.getElementById('welcomeBtn').addEventListener('click', function () {
    alert('Welcome! We look forward to seeing you at the workshop.');
  });
</script>

</body>
</html>

sequenceDiagram
  participant User
  participant Browser
  participant Server

  User->>Browser: Fills in name, email, session
  User->>Browser: Clicks "Register" (type=submit)
  Browser->>Server: POST /submit-your-data (name, email, session in body)
  Server-->>Browser: Response (confirmation page)

  User->>Browser: Clicks "Clear Form" (type=reset)
  Browser->>Browser: Resets all fields to default

  User->>Browser: Clicks "Show Welcome Message" (type=button)
  Browser->>Browser: Runs JS alert — no network request

🧪 Try It Yourself

Task: Build a workshop registration form from scratch.

Requirements:

1. Collect the participant's name (text input) and email (email input).
2. Add a <select> with at least three session options.
3. Include a <button type="submit"> to send the data.
4. Include a <button type="reset"> to clear the form.
5. Include a <button type="button"> that calls alert('Welcome to the workshop!') when clicked.

Starter snippet — copy this and fill in the gaps:

<form action="/register" method="post">

  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="user_email">

  <label for="session">Session:</label>
  <select id="session" name="session">
    <option value="">-- pick one --</option>
    <!-- add your options here -->
  </select>

  <button type="submit">Register</button>
  <button type="reset">Clear Form</button>
  <button type="button" onclick="alert('Welcome to the workshop!')">Welcome</button>

</form>

Success criterion: Open the file in a browser. Clicking Welcome shows an alert. Clicking Clear Form empties all fields. Clicking Register navigates to /register (or shows a "page not found" — that's expected; it means the form submitted correctly).

🔍 Checkpoint Quiz

Q1. What is the difference between method="get" and method="post" on a <form> tag?

A) get sends data in the URL; post sends data in the request body
B) get is faster; post is more secure and always encrypts data
C) They are interchangeable — the server decides which to use
D) get is for forms, post is only for API calls

Q2. Given this snippet, what happens when the user clicks the button?

<form action="/checkout" method="post">
  <input type="text" name="card" value="4111-1111">
  <button>Pay Now</button>
</form>

A) Nothing — <button> without a type attribute is ignored
B) The form submits to /checkout because button defaults to type="submit" inside a form
C) The form resets because button defaults to type="reset"
D) A JavaScript error is thrown

Q3. What is the bug in the following code?

<form action="/save" method="post">
  <label for="city">City:</label>
  <input type="text" id="town" name="city">
  <button type="submit">Save</button>
</form>

A) method="post" should be method="POST" (uppercase required)
B) The for attribute on the label ("city") does not match the id on the input ("town"), breaking the label–input association
C) <button type="submit"> must be <input type="submit"> to work inside a form
D) There is no bug

Q4. How would you use a plain <button> to validate a form field with JavaScript before submission — without submitting the form prematurely?

A) Use <button type="submit"> and call event.preventDefault() inside the click handler
B) Use <button type="button"> and call your validation function inside the click handler
C) Remove the type attribute so the button does nothing by default
D) Add formaction="javascript:void(0)" to the submit button

A1. A — get appends form data as URL query parameters (visible, bookmarkable, length-limited); post sends data in the HTTP request body (hidden from URL, no length limit, appropriate for passwords and registrations).

A2. B — A <button> element inside a <form> defaults to type="submit" when type is omitted, so it submits the form to /checkout. This is a common source of accidental submissions; always declare type explicitly.

A3. B — The <label for="city"> points to id="city", but the input has id="town". The label and input are not linked, so clicking the label does not focus the field and screen readers cannot associate them. Fix: change the input id to "city" or the label for to "town".

A4. B — type="button" opts the button completely out of form submission. You can then call any JavaScript validation function from the click handler, show error messages, and only programmatically submit (or call form.submit()) when validation passes.

🪞 Recap

• The <form> tag wraps all inputs; action sets the destination URL and method sets the HTTP verb (get or post).
• Every <label> should have a for attribute matching its input's id — this links them for both accessibility and usability.
• <button type="submit"> sends the form; <button type="reset"> clears it; <button type="button"> does neither and is the safe choice for JavaScript triggers.
• Always declare type on every <button> — omitting it defaults to submit inside a form, which causes accidental submissions.
• CSS styles the appearance; JavaScript (best attached via addEventListener) handles interactivity; the two concerns stay separate from HTML structure.

📚 Further Reading

• MDN: <form> element — complete attribute reference and browser compatibility
• MDN: <button> element — all three type values explained with examples
• MDN: <label> element — accessibility implications of correct label–input pairing
• HTML Living Standard — Forms — the canonical spec if you need to go deep
• ⬅️ Previous: DIV Positioning
• ➡️ Next: JavaScript BOM