8. Creating Submit Buttons and Handling Form Submission

Hey there!

In our previous post, we explored how to make forms user-friendly using labels, placeholders, and fieldsets. Now, it’s time to take the next step—making those forms interactive by adding submit buttons and handling the form submission process.

This article will walk you through the essentials of creating submit buttons, how form submission works, and how to handle the data users send your way. Whether you’re a beginner or brushing up your skills, you’ll find clear explanations, practical examples, and step-by-step instructions.

Let’s dive in!

Why Are Submit Buttons and Form Submission Important?

A form is not just about collecting data visually — it’s about sending that data somewhere for processing. The submit button is the user’s final action to say, “I’m done, send this info!” Without it, the form can’t send any data.

Handling form submission properly means you can:

Collect user inputs effectively
Validate data before sending it
Provide feedback after submission
Connect to servers, APIs, or back-end logic

1. What Is a Submit Button?

The submit button triggers the form submission process. It’s usually a button or input of type submit.

Basic Submit Button Example

<form action="/submit-form" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  
  <button type="submit">Send</button>
</form>

What happens here?

The <button type="submit"> sends the form data to the URL defined in the form’s action attribute (/submit-form).
The method="post" tells the browser to send the data via POST (common for sensitive data).
If no type is specified on the button, it defaults to submit inside a form.

2. Different Ways to Create a Submit Button

You can create submit buttons in a few different ways:

Using `<button>`

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

Flexible—you can add text, icons, or HTML inside the button.

Using `<input>`

<input type="submit" value="Submit Form" />

Simple and limited to text inside the button (value attribute).

Note on Button Types

There are three main button types in forms:

submit — submits the form
reset — clears all fields to default values
button — does nothing by default; used with JavaScript

3. How Form Submission Works: The Basics

When you click a submit button:

The browser gathers all the form input data (fields with name attributes).
It sends the data to the URL in the form’s action attribute.
The HTTP method used is defined by the form’s method attribute (GET or POST are common).
The server or back-end processes the data and sends a response.
The browser either loads the response or you handle it asynchronously with JavaScript (more on that later).

Example with GET Method

<form action="/search" method="get">
  <input type="text" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

The form data is appended to the URL as query parameters (e.g., /search?q=keyword).

4. Handling Form Submission with JavaScript (Prevent Default Behavior)

Sometimes you want to handle the form data without reloading the page—for example, validating input or sending data via AJAX.

You do this by preventing the default form submission and handling the event yourself.

Example: Prevent Form Submission and Log Input

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    event.preventDefault(); // Stop the form from submitting normally
    const username = form.username.value;
    console.log('Username submitted:', username);
    alert('Form submitted! Check console for username.');
  });
</script>

What happens?

The default page reload is prevented.
You can validate or process data in JavaScript.
Great for single-page apps or async submissions.

5. Validating Form Before Submission

HTML5 offers built-in validation with attributes like required, type, pattern, and more.

Example: Required Field with Email Validation

<form action="/signup" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="you@example.com" />
  <button type="submit">Sign Up</button>
</form>

The browser checks if the email is valid and if the field is filled before submission.
If invalid, it shows a helpful message and stops the submit.

For custom validation in JavaScript:

form.addEventListener('submit', function(event) {
  const emailInput = form.email;
  if (!emailInput.value.includes('@')) {
    event.preventDefault();
    alert('Please enter a valid email address!');
  }
});

6. Practical Example: Contact Us Form with Submit Button and JS Handling

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

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send Message</button>
</form>

<script>
  document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const name = this.name.value.trim();
    const message = this.message.value.trim();

    if (!name || !message) {
      alert('Please fill out all fields.');
      return;
    }

    // Simulate sending data
    console.log('Sending:', { name, message });
    alert('Thank you for your message, ' + name + '!');

    // Reset form
    this.reset();
  });
</script>

7. Summary

What You Learned:

How to create submit buttons using <button> and <input>
The role of action and method in form submission
How the browser submits forms by default
How to handle form submission with JavaScript to customize behavior
Basic validation using HTML5 and JavaScript

Thanks for reading! If you want, I can help you build a complete form submission workflow with front-end and back-end examples next. Just say the word!

Happy coding!