The submit button in HTML is a crucial component found within form elements, input elements, button elements, and HTML tags. This button is generated using the input tag with a type attribute set to "submit" within an HTML form. When clicked, the submit button processes and stores user-provided information into a designated database table based on specific needs. It enables users to input various data types such as text, email addresses, phone numbers, messages, and other relevant user details.
The HTML submit button is commonly utilized by developers to retrieve stored data along with other operations. This button facilitates the redirection to a different page, such as a PHP or Java page. It plays a crucial role in user-engaging forms like login, registration, sign-up, and various custom forms.
Use Input Tag for HTML Submit Button
The input element is utilized for receiving user input in an interactive manner. It collaborates with the submit type within the element identified by the ID and class name. Providing a title for the button is essential as it necessitates a value.
Syntax
The syntax below is employed to handle the submit button in HTML. This button is positioned within the form element alongside other tags related to input.
<input type = "submit" value = "Save Data" >
OR
<form>
<input type = "submit" value = "Save Data" name = "submit_data" id="submit_data">
</form>
Description:
- The name and ID are optional for the HTML submit button.
- The input tag is essential for the submit type for the submit button.
- The form tag uses the submit button to operate with the user information.
Examples
The provided examples demonstrate various forms featuring a submit button in HTML. The submit button in HTML interacts with JavaScript and jQuery. It is possible to enhance its visual appeal by applying CSS properties for styling purposes.
Example 1:
The illustration demonstrates user registration forms featuring a standard HTML submit button. An input tag can be employed for the submit button.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 250px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> We can see the basic submit button with form </h5>
<div class = "flex-containers">
<form>
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Email: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<label> Contact: </label>
<input type = "text" id = "email" name = "email">
<br><br>
<center> <input type="submit" value="Submit Data"> </center>
</form>
</div>
</div>
</body>
</html>
Output:
The result displays the form containing a simple submit button.
Example 2:
The demonstration illustrates user registration forms containing a fundamental HTML submission button. This button facilitates the redirection to the page for processing data. The buttons can be referenced using ID and name attributes.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> HTML SUBMIT BUTTON </h3>
<h5>
we can redirect to the save.php page after clicking on the button
</h5>
<div class = "flex-containers">
<form action="path/save.php">
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Email: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<label> Contact: </label>
<input type = "text" id = "contact" name = "contact">
<br><br>
<center> <input type = "submit" value = "Save Data" name = "submit_data" id="submit_data"> </center>
</form>
</div>
</div>
</body>
</html>
Output:
The output shows the form with the submit button.
Example 3:
In this instance, the demonstration illustrates the process of styling user registration forms by utilizing CSS properties in conjunction with the HTML submit button. The styling options include adjusting the background color, font size, font weight, and text color of the submit button.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
#submit_data{
background-color: navy;
color: white;
height: 30px;
width: 80px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5>
we can redirect to the save.php page after clicking on the button
</h5>
<div class = "flex-containers">
<form action="path/save.php">
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Email: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<label> Contact: </label>
<input type = "text" id = "contact" name = "contact">
<br><br>
<center> <input type = "submit" value = "Save Data" name = "submit_data" id="submit_data"> </center>
</form>
</div>
</div>
</body>
</html>
Output:
The displayed output exhibits the submit button styled in a certain way.
Example 4:
The demonstration illustrates user registration forms featuring an HTML submit button that utilizes a JavaScript function. JavaScript can be employed to interact with users through alert boxes.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
#submit_data{
background-color: navy;
color: white;
height: 30px;
width: 80px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> HTML SUBMIT BUTTON </h3>
<h5>
we can use the javascript function after clicking the submit button
</h5>
<div class = "flex-containers">
<form>
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Email: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<label> Contact: </label>
<input type = "text" id = "contact" name = "contact">
<br><br>
<center> <input type = "submit" value = "Save Data" name = "submit_data" id="submit_data" onclick="return dataDisplay()"> </center>
</form>
</div>
</div>
<script>
function dataDisplay(){
alert("the submit button click successfully!!!!");
return true;
}
</script>
</body>
</html>
Output:
The displayed result presents the submit button styled accordingly.
Use the Button Tag for the HTML Submit Button
The button element in HTML is utilized to generate a submit button with a specified type. It enables users to submit form data and trigger actions.
Syntax
To trigger the submission of a form in HTML, the submit button can be utilized by employing the button tag with the following syntax.
<button type = "submit" > Submit Data </button>
Examples
The illustrations demonstrate the utilization of the button element within a form containing a submit button in HTML. The button in HTML interacts with JavaScript and jQuery. By applying CSS attributes, we can enhance its appearance to create an appealing button.
Example 1:
The following example demonstrates user registration forms containing a standard HTML submit button. In this case, the button tag with a submit type can be utilized within the HTML form.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: grey;
height: 250px;
width: 350px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5> We can see the submit button with button form in the Html form </h5>
<div class = "flex-containers">
<form>
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Job Position: </label>
<input type = "text" id = " Position" name = "Position">
<br><br>
<center> <button type = "submit" value="Submit Data"> Submit Data </button> </center>
</form>
</div>
</div>
</body>
</html>
Output:
The result displays the form containing a simple submit button.
Example 2:
The illustration demonstrates simple form structures incorporating an HTML submit button in conjunction with a JavaScript function. Upon clicking the submit button, we can employ the alert feature within the JavaScript function.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 270px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON </h3>
<h5>
we can use the javascript function after clicking the submit button
</h5>
<div class = "flex-containers">
<form>
<label> User Name: </label>
<input type = "text" id = "username" name = "username">
<br><br>
<label> Email: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<label> Contact: </label>
<input type = "text" id = "contact" name = "contact">
<br><br>
<center> <button type = "submit" name = "submit_data" id="submit_data" onclick="return dataDisplay()"> Save Data </button> </center>
</form>
</div>
</div>
<script>
function dataDisplay(){
alert("the html submit button click successfully using button tag!!!!");
return true;
}
</script>
</body>
</html>
Output:
The result displays the submit button styled according to the specified style.
Example 3:
The demonstration illustrates user authentication or registration forms containing a simple HTML submit button. To create the form in HTML, we can utilize the <button> element with a type attribute set to "submit". Custom styling for the submit button can be achieved using CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title> HTML SUBMIT BUTTON
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: grey;
height: 250px;
width: 350px;
border : 2px solid grey;
}
button{
background-color: navy;
color: white;
height: 30px;
width: 100px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Get the HTML SUBMIT BUTTON with subscribe form </h3>
<h5> We can see the submit button with button form in the Html form </h5>
<div class = "flex-containers">
<form>
<label> Email Id: </label>
<input type = "email" id = "email" name = "email">
<br><br>
<center> <button type = "submit" value="Submit Data"> Submit Data </button> </center>
</form>
</div>
</div>
</body>
</html>
Output:
The result displayed exhibits a form containing a fundamental submission button.
Conclusion
The submit button in HTML is utilized for executing user-related tasks such as inserting, creating, editing, and performing operations on HTML forms. It is commonly employed by developers for enabling direct data-saving capabilities in buttons with the submit type.