How to create a form with custom buttons in HTML

Overview

Buttons are the components in HTML which perform a certain action when clicked. Various buttons perform various actions. The HTML has some predefined buttons with a certain type of action. In a HTML form when the <button> tag is used by default, the simple button inside the form tag is of type submit. So when you click on a button inside the form tag it will submit the form on your desired path and depends on the GET and POST request. The submit location is defined in the action attribute of the form. The HTML form by default is of method type GET.

When the button is clicked if the form contains the method type GET then the data written inside the input tags are concatenated with the URL of the page. But this is not a secure way for a request as the user credentials may be disclosed in this case. So it is preferred to use the POST type of method when submitting the user credentials for security purposes.

Syntax

The syntax to create a form is −

<form action="">
</form>

The syntax to create a button is −

<button> </button>

Algorithm

Step 1 − Create a HTML boilerplate in the code editor.

Step 2 − As we had used the font awesome reset icon in our button, so we had to link the font awesome CDN link to the head tag of the code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bS uGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Step 3 − Create a HTML form using the

tag. Now inherit some input fields to it as per your requirement. 

<input type="text" name="" id="" placeholder="">

Step 4 − Create a button inside the form using the button tag. The button inside the form has the property which allows submitting the form to the particular address.

<button> Submit </button>

Step 5 − The form with customized buttons is created successfully.

Example

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bS uGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>Custom Button in form</title>
</head>
<body>
   <h3 style="text-align: center;">Form with Custom Buttons</h3>
   <form action="" method="" style="display: flex; flex-direction: column;width: 15rem;margin: 2rem auto;">
      <input type="text" name="username" id="uname" placeholder="Username">
      <input type="text" name="Adress" id="adress" placeholder="Address">
      <input type="tel" name="phone" id="phone" placeholder="Phone">
      <input type="email" name="email" id="email" placeholder="Email">
      <div class="btns" style="display: flex; margin-top: 0.5rem;gap: 0.8rem;">
         <button style="width: 5rem;border: none; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.459);color: white; background-color: green; border-radius: 5px;padding: 0.5rem;cursor: pointer;">Submit</button>
         <button id="clearAll" type="reset" style="width: 5rem;border: none;color: white; border-radius: 5px;padding: 0.5rem;cursor: pointer; background: rgb(0, 0, 0);" onclick="clearALL()">
            <i class="fas fa-undo"></i>
         </button>
      </div>
   </form>
</body>
</html>

The below image shows a form with four different input fields as username, address, phone and email. We had also created two buttons in which the first button show the text with the value button and the other button shows the icon of reset.

Conclusion

We can also make the button more attractive by using the styling for the buttons. The animation styling property also makes the User Interface (UI) more attractive. As the button tag has some attribute which makes it work in various different types. These attributes are value, disabled, type which defines the name on the button, the disabled attribute makes the button disable which will not allow the button to function and their types are submit, reset respectively. We can customize the buttons in two ways one in terms of styling and others in terms of functionality. We can create different buttons with their different function when clicked.

Updated on: 11-Apr-2023

221 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements