Topic 4 of 26 · UI Designer

Topic 4 : Form, Buttons

Lesson TL;DRTopic 4: Form, Buttons 📖 5 min read · 🎯 intermediate · 🧭 Prerequisites: javascriptobjects, divpositioning Why this matters Picture this: you visit a website to sign up, book a slot, or contact some...
5 min read·intermediate·html · forms · buttons · input

Topic 4: Form, Buttons

📖 5 min read · 🎯 intermediate · 🧭 Prerequisites: javascript-objects, div-positioning

Why this matters

Picture this: you visit a website to sign up, book a slot, or contact someone — and right there is a box asking for your name, your email, a message. That little box is an HTML form. And that "Submit" button? That's what kicks everything into motion. As a UI designer, forms and buttons are the most common things you will build — and also the easiest to get wrong. Get them right, and users glide through your page. Get them wrong, and they leave. Today we learn how to build them the right way.

What You'll Learn

  • How to structure an HTML <form> using the action and method attributes
  • How to wire up <label> and <input> elements inside a form
  • The three core button types — submit, reset, and button — and when to use each
  • How CSS and JavaScript extend buttons from mere triggers into interactive UI elements

The Analogy

Think of an HTML form as the sign-up sheet for a community picnic. The sheet itself is the <form> tag — it holds everything together. Each line on the sheet (name, email, dietary restrictions) is an <input> field. The label beside each line telling you what to write is a <label>. At the bottom of the sheet there are three options: drop it in the submission box (submit), erase everything and start over (reset), or tap the organiser on the shoulder and say hello (a custom button action). The sheet knows exactly where to go when it's handed in — that destination is the action attribute.

Chapter 1: Structure of an HTML Form

A form in HTML is defined with the <form> tag. This tag acts like an envelope, wrapping all the input elements and buttons needed to collect and submit data.

Two key attributes live on the <form> tag itself:

  • action — tells the form where to send the data when submitted (a URL path like /submit-your-data)
  • method — specifies the HTTP method used when sending form data (POST or GET)

Here is a complete, minimal registration 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>

Breaking down each piece:

ElementPurpose
<form action="...">Destination URL for the submitted data
<form method="post">HTTP verb — post sends data in the request body
<label for="name">Associates a visible label with the input whose id matches
<input type="text">A single-line text field
<input type="email">Like type="text" but validates email format before submit
<input type="submit">Renders as a clickable button that triggers form submission

The for attribute on <label> must match the id on its paired <input>. This binding makes the label clickable (focuses the field) and is essential for screen-reader accessibility.

Chapter 2: The Three Button Types

Buttons are the gatekeepers of a form — they control what happens when the user clicks. HTML gives you three distinct type values, each with a different job.

1. Submit Button

The most common type. Clicking it sends all form field values to the URL named in action.

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

type="submit" is explicit and self-documenting. A <button> inside a <form> with no type attribute also defaults to submit, but being explicit avoids surprises.

2. Reset Button

Clears every field in the form back to its default value — a full do-over for the user.

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

type="reset" wipes all data entered into the form without sending anything to the server.

3. Button for JavaScript

Sometimes you need a button that neither submits nor resets — it just triggers a JavaScript function.

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

type="button" tells the browser this button has no built-in form behaviour. What it does is entirely up to JavaScript. Without this type, a plain <button> inside a form would accidentally submit on click.

Chapter 3: Using Buttons Effectively

Buttons are not limited to plain grey rectangles. CSS can transform their appearance; JavaScript can make them dynamic and responsive.

A styled, accessible button in CSS:

button {
  background-color: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #357abd;
}

button:focus {
  outline: 3px solid #f0a500;
  outline-offset: 2px;
}

A JavaScript function triggered by type="button":

function showWelcome() {
  alert('Welcome to the workshop! We are glad you are here.');
}

<button type="button" onclick="showWelcome()">Say Hello</button>

Combining CSS for visual polish and JavaScript for interactivity turns a static form into an engaging, branded experience — while type attributes ensure each button does exactly what it is meant to do and nothing else.

🧪 Try It Yourself

Task: Build a workshop registration form.

The form must collect:

  • Participant's name (text input)
  • Participant's email (email input)
  • A session selection (use a <select> dropdown with at least three workshop sessions)

The form must include:

  • A submit button that sends the data to /register
  • A reset button that clears all fields
  • A custom button (type="button") that calls a JavaScript function displaying a welcome alert

Starter snippet:

<!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; }
    button { padding: 10px 18px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Register for the Workshop</h1>

  <form action="/register" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" required>

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

    <label for="session">Session:</label>
    <select id="session" name="session">
      <option value="html-css">HTML & CSS Fundamentals</option>
      <option value="js-basics">JavaScript Basics</option>
      <option value="ui-design">UI Design Principles</option>
    </select>

    <button type="submit">Register</button>
    <button type="reset">Clear Form</button>
    <button type="button" onclick="/* your welcome function here */">Welcome Message</button>
  </form>

  <script>
    // Write your welcome function here
  </script>
</body>
</html>

Success criterion: Clicking "Register" should attempt a POST to /register (you'll see a network request in DevTools). Clicking "Clear Form" should blank all fields. Clicking "Welcome Message" should show an alert in the browser.

🔍 Checkpoint Quiz

Q1. What is the purpose of the action attribute on a <form> tag?

A) It defines which HTTP method to use
B) It specifies the URL where form data is sent on submission
C) It sets the form's visible title
D) It links CSS styles to the form

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

<form action="/save" method="post">
  <input type="text" name="city" value="Vizag">
  <button type="reset">Undo</button>
</form>

A) The form is submitted to /save
B) An alert fires
C) The text field is cleared back to its default value
D) The page reloads

Q3. What is the difference between <button type="submit"> and <button type="button">?

A) type="submit" is only valid outside a <form>; type="button" works inside
B) type="submit" triggers form submission; type="button" has no built-in form behaviour and relies on JavaScript
C) They are identical — type has no effect on <button>
D) type="button" also submits the form, just without validation

Q4. How would you add a button that calls a function confirmBooking() when clicked, without accidentally submitting the form?

A) <button onclick="confirmBooking()">Confirm</button>
B) <button type="submit" onclick="confirmBooking()">Confirm</button>
C) <button type="button" onclick="confirmBooking()">Confirm</button>
D) <input type="button" submit="false" onclick="confirmBooking()">

A1. B — action is the destination URL; without it the form posts to the current page URL by default.

A2. C — type="reset" clears all fields in the form to their initial values; it does not submit anything.

A3. B — type="submit" is wired to the form's submission mechanism; type="button" is inert by default and only does something if JavaScript is attached.

A4. C — type="button" disables the default submit behaviour, so only confirmBooking() runs. Option A omits type, which defaults to submit inside a form and would try to submit.

🪞 Recap

  • The <form> tag wraps all inputs and uses action (destination URL) and method (HTTP verb) to control data delivery.
  • <label for="..."> must match the id of its paired <input> for accessibility and usability.
  • type="submit" sends the form; type="reset" clears it; type="button" does neither and hands full control to JavaScript.
  • CSS styles buttons visually; a :focus outline is required for keyboard accessibility.
  • Always set type explicitly on every <button> inside a form to avoid unintended submission.

📚 Further Reading

Like this topic? It’s one of 26 in UI Designer.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →