Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is the HTML Submit Button? 
3.
Syntax 
4.
Attributes of Submit Button 
5.
Example 1: Use the submit button
5.1.
HTML
6.
Example 2: Customize the Submit Button using CSS 
6.1.
HTML
7.
Key Features of the Submit Button
8.
Supported Browsers 
9.
Frequently Asked Questions
9.1.
What happens when an HTML form is submitted?
9.2.
What is the difference between the submit and the click button?
9.3.
What is the shortcut key for the submit button?
10.
Conclusion
Last Updated: Oct 2, 2024
Easy

Html Submit Button

Author Rahul Singh
0 upvote

Introduction

In HTML, a submit button is an important component of any web application. When you build a simple web application or any complex application, the submit button is used everywhere. The submit button is used to submit the input given by the user to the server. It sends the data to the server for processing. 

HTML Submit button

In this article, we will discuss about HTML submit button. We will learn its syntax, examples, and supported browsers. 

What is the HTML Submit Button? 

In HTML submit button is a type of button that is used within forms and is represented by the <input> element with type ="submit". When the user clicks on the submit button, the user input data is sent to the server. All the fields in which the user gives the input are sent to the server for processing. 

This is the most used element in the form to send the data back to the server. 

Syntax 

<input type = " submit">

Attributes of Submit Button 

There are various attributes that can be used with the submit button. These attributes help to enhance the functionality and provide a good user experience. Below we have discussed some of the attributes used in html submit button. 

value: By default, the HTML submit button has submit as a default value. You can customize it to the text displayed on the submit button. 

<input type="submit" value="Send Data">


form: You can link the submit button to a different form if it is placed outside the form tag. This helps to differentiate the submit button from the form structure. 

<input type="submit" form="myForm" value="Submit Form">

 

disabled: Disabled has the functionality to prevent the form from getting submitted with the input values. 

<input type="submit" value="Submit" disabled>

Example 1: Use the submit button

In the below example, we discussed the use of the submit button in HTML. 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <link rel="stylesheet" href="style.css" />

 <title>Example</title>

</head>

<body>

<h1>  HTML input type = "submit"</h1>

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

   <label for="name">Name:</label>

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

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

</form>

</body>

</html>


Output

Output


In the above example, the submit button sends the data to the server by the action attribute. 

Example 2: Customize the Submit Button using CSS 

You might also want to customize the submit button to make it look more user-friendly and let it fit on your website. To achieve this, you can customize the submit button using CSS. Below is an example to implement this: 

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <link rel="stylesheet" href="style.css" />

 <title>Example</title>

</head>

<body>

 <H1> HTML input type = "submit"</h1>

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

   <label for="email">Email:</label>

   <input type="email" id="email" name="email">

  

   <input type="submit" value="Submit" class="btn-submit">

</form>

<style>

   .btn-submit {

       background-color: red;

       color: white;

       padding: 10px 20px;

       border: none;

       cursor: pointer;

       font-size: 16px;

   }   

   .btn-submit:hover {

       background-color: darkgreen;

   }

</style>

</form>     

</body>

</html>


Output

Output

Key Features of the Submit Button

  1. The submit button is defined using the <button> or <input> HTML elements with the type attribute set to "submit"
<input type="submit" value="Submit">

 

  1. Submit buttons can be made accessible to all users. It is an important aspect of web accessibility. 
     
  2. You can customize the submit button according to the use. With the help of CSS and JavaScript, you can add validation to the submit button.
     
  3. By default, the submit button has the action to send the data to the server if not disabled explicitly. 

Supported Browsers 

Below are the mentioned browsers that supports html submit button functionality. 

  1. Edge 
     
  2. Chrome
     
  3. Opera 
     
  4. Firefox 
     
  5. Safari

Frequently Asked Questions

What happens when an HTML form is submitted?

Most of the HTML forms have the default action, to submit all the data values of the field once it is filled by the user. These values are sent to the server for processing. These fields can be customized and can be added with a validation type. 

What is the difference between the submit and the click button?

Both of these buttons have their use cases and default behavior. The submit button's default behavior is to send the data to the server while clicking the button does not have any specific behavior until and unless it is explicitly defined. 

What is the shortcut key for the submit button?

In general, ctrl+ Enter is the shortcut key that is used to submit the forms. Most of the forms support this shortcut for better accessibility. 

Conclusion

In this blog, we thoroughly discussed the submit button which is used to send the data values from the form to the server. We also discussed its attributes and features. Later looked at the examples and browsers that support the use of button tags. 

You can also check out our other blogs on Code360.

Live masterclass