Article Categories

Selected Reading

How to Create a Form with Custom Buttons in HTML

HTML Web Development Front End Technology

Buttons are interactive HTML elements that trigger specific actions when clicked. In HTML forms, the <button> element by default has type="submit", which submits the form data to the server. Custom buttons enhance user experience by providing styled, functional controls with personalized appearance and behavior.

HTML forms support different HTTP methods GET appends form data to the URL (visible and less secure), while POST sends data in the request body (hidden and more secure). For sensitive information like user credentials, always use the POST method.

Syntax

Following is the basic syntax for creating an HTML form

<form action="submit_url" method="post">
   <!-- form elements -->
</form>

Following is the syntax for creating custom buttons

<button type="submit" class="custom-btn">Submit</button>
<button type="reset" class="custom-btn">Reset</button>
<button type="button" onclick="customFunction()">Custom Action</button>

Button Types

HTML buttons have three main types that define their behavior

submit Submits the form data to the server (default type)
reset Resets all form fields to their initial values
button Generic button with no default behavior, used with JavaScript

Creating a Basic Form with Custom Buttons

Following example demonstrates a simple contact form with styled submit and reset buttons

<!DOCTYPE html>
<html>
<head>
   <title>Basic Custom Form Buttons</title>
   <style>
      .form-container {
         max-width: 400px;
         margin: 20px auto;
         padding: 20px;
         font-family: Arial, sans-serif;
         border: 1px solid #ddd;
         border-radius: 8px;
      }
      .form-group {
         margin-bottom: 15px;
      }
      .form-group input {
         width: 100%;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
      }
      .btn {
         padding: 10px 20px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
         margin-right: 10px;
         font-size: 14px;
      }
      .btn-submit {
         background-color: #28a745;
         color: white;
      }
      .btn-reset {
         background-color: #dc3545;
         color: white;
      }
      .btn:hover {
         opacity: 0.9;
      }
   </style>
</head>
<body>
   <div class="form-container">
      <h3>Contact Form</h3>
      <form action="/submit" method="post">
         <div class="form-group">
            <input type="text" name="name" placeholder="Full Name" required>
         </div>
         <div class="form-group">
            <input type="email" name="email" placeholder="Email Address" required>
         </div>
         <div class="form-group">
            <input type="tel" name="phone" placeholder="Phone Number">
         </div>
         <button type="submit" class="btn btn-submit">Submit</button>
         <button type="reset" class="btn btn-reset">Reset</button>
      </form>
   </div>
</body>
</html>

The output displays a clean contact form with styled green submit and red reset buttons

Contact Form
[Full Name input field]
[Email Address input field] 
[Phone Number input field]
[Submit] [Reset]

Advanced Custom Buttons with Icons

Following example shows how to create custom buttons with Font Awesome icons and enhanced functionality

<!DOCTYPE html>
<html>
<head>
   <title>Advanced Custom Form Buttons</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <style>
      .advanced-form {
         max-width: 350px;
         margin: 30px auto;
         padding: 25px;
         font-family: Arial, sans-serif;
         background: #f8f9fa;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      }
      .input-field {
         width: 100%;
         padding: 12px;
         margin-bottom: 15px;
         border: 2px solid #e9ecef;
         border-radius: 6px;
         font-size: 14px;
         box-sizing: border-box;
      }
      .input-field:focus {
         outline: none;
         border-color: #007bff;
      }
      .button-group {
         display: flex;
         gap: 10px;
         margin-top: 20px;
      }
      .custom-btn {
         flex: 1;
         padding: 12px;
         border: none;
         border-radius: 6px;
         cursor: pointer;
         font-size: 14px;
         font-weight: bold;
         transition: all 0.3s ease;
      }
      .btn-primary {
         background: linear-gradient(45deg, #007bff, #0056b3);
         color: white;
      }
      .btn-secondary {
         background: linear-gradient(45deg, #6c757d, #495057);
         color: white;
      }
      .btn-warning {
         background: linear-gradient(45deg, #ffc107, #e0a800);
         color: #212529;
      }
      .custom-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }
   </style>
</head>
<body>
   <div class="advanced-form">
      <h3 style="text-align: center; color: #333; margin-bottom: 20px;">Registration Form</h3>
      <form action="/register" method="post">
         <input type="text" name="username" class="input-field" placeholder="Username" required>
         <input type="email" name="email" class="input-field" placeholder="Email Address" required>
         <input type="password" name="password" class="input-field" placeholder="Password" required>
         <input type="tel" name="phone" class="input-field" placeholder="Phone Number">
         
         <div class="button-group">
            <button type="submit" class="custom-btn btn-primary">
               <i class="fas fa-paper-plane"></i> Submit
            </button>
            <button type="reset" class="custom-btn btn-secondary">
               <i class="fas fa-undo"></i> Reset
            </button>
            <button type="button" class="custom-btn btn-warning" onclick="validateForm()">
               <i class="fas fa-check"></i> Validate
            </button>
         </div>
      </form>
   </div>
   
   <script>
      function validateForm() {
         const inputs = document.querySelectorAll('.input-field[required]');
         let isValid = true;
         
         inputs.forEach(input => {
            if (!input.value.trim()) {
               input.style.borderColor = '#dc3545';
               isValid = false;
            } else {
               input.style.borderColor = '#28a745';
            }
         });
         
         alert(isValid ? 'Form is valid!' : 'Please fill all required fields.');
      }
   </script>
</body>
</html>

The output shows a modern registration form with gradient buttons, icons, and custom validation

Registration Form
[Username input field]
[Email Address input field]
[Password input field]
[Phone Number input field]
[? Submit] [? Reset] [? Validate]

Interactive Button States

Following example demonstrates buttons with different states and interactive feedback

<!DOCTYPE html>
<html>
<head>
   <title>Interactive Button States</title>
   <style>
      .interactive-form {
         max-width: 400px;
         margin: 20px auto;
         padding: 20px;
         font-family: Arial, sans-serif;
      }
      .form-input {
         width: 100%;
         padding: 10px;
         margin-bottom: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-sizing: border-box;
      }
      .state-btn {
         padding: 10px 20px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
         margin: 5px;
         font-weight: bold;
         transition: all 0.3s ease;
      }
      .btn-enabled { background: #28a745; color: white; }
      .btn-disabled { background: #6c757d; color: #aaa; cursor: not-allowed; }
      .btn-loading { background: #ffc107; color: #333; }
      .btn-success { background: #17a2b8; color: white; }
   </style>
</head>
<body>
   <div class="interactive-form">
      <h3>Interactive Form Buttons</h3>
      <form>
         <input type="text" id="nameInput" class="form-input" placeholder="Enter your name" oninput="checkForm()">
         <input type="email" id="emailInput" class="form-input" placeholder="Enter your email" oninput="checkForm()">
         
         <button type="button" id="submitBtn" class="state-btn btn-disabled" onclick="simulateSubmit()" disabled>
            Submit Form
         </button>
         <button type="button" class="state-btn btn-enabled" onclick="clearForm()">
            Clear All
         </button>
      </form>
      <p id="status"></p>
   </div>
   
   <script>
      function checkForm() {
         const name = document.getElementById('nameInput').value;
         const email = document.getElementById('emailInput').value;
         const submitBtn = document.getElementById('submitBtn');
         
         if (name.trim() && email.trim()) {
            submitBtn.disabled = false;
            submitBtn.className = 'state-btn btn-enabled';
            submitBtn.textContent = 'Submit Form';
         } else {
            submitBtn.disabled = true;
            submitBtn.className = 'state-btn btn-disabled';
            submitBtn.textContent = 'Submit Form';
         }
      }
      
      function simulateSubmit() {
         const submitBtn = document.getElementById('submitBtn');
         const status = document.getElementById('status');
         
         // Loading state
         submitBtn.className = 'state-btn btn-loading';
         submitBtn.textContent = 'Submitting...';
         submitBtn.disabled = true;
         status.textContent = 'Processing your request...';
         
         // Simulate network delay
         setTimeout(() => {
            submitBtn.className = 'state-btn btn-success';
            submitBtn.textContent = 'Success!';
            status.textContent = 'Form submitted successfully!';
            
            // Reset after 2 seconds
            setTimeout(() => {
               checkForm();
               status.textContent = '';
            }, 2000);
         }, 1500);
      }
      
      function clearForm() {
         document.getElementById('nameInput').value = '';
         document.getElementById('emailInput').value = '';
         document.getElementById('status').textContent = '';
         checkForm();
      }
   </script>
</body>
</html>

The form demonstrates dynamic button states disabled when fields are empty, enabled when filled, loading during submission, and success feedback

Interactive Form Buttons
[Enter your name]
[Enter your email]
[Submit Form] [Clear All]

(Submit button becomes enabled only when both fields are filled)

Aman Gupta

Updated on: 2026-03-16T21:38:54+05:30

612 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next