Forum

Optimizing HTML For...
 
Notifications
Clear all

Optimizing HTML Forms: How to Use Multiple Submit Buttons for Better User Experience?

 
(@administrator)
Member Admin

Yes, you can use two or more submit buttons in the same HTML form. Each submit button can have a unique name and value, which can be used to differentiate between the buttons and determine which one was clicked.

For example, you might use one submit button to save a form as a draft, and another to submit the form for final processing. To handle the form submission differently based on which button was clicked, you can use server-side code to check the name and value of the submitted button and take appropriate action.

It's worth noting that using multiple submit buttons in the same form can make the form more complex, so it's generally recommended to use this approach only when necessary and to ensure that the user interface is clear and easy to understand.

 

Here's an example HTML form with two submit buttons:

 

<form action="submit.php" method="post">
  <input type="text" name="name" placeholder="Enter your name">
  <input type="submit" name="submit" value="Save as Draft">
  <input type="submit" name="submit" value="Submit">
</form>

 

In this example, the form has two submit buttons, one labeled "Save as Draft" and the other labeled "Submit". Both buttons have the same name "submit", which is used to identify which button was clicked when the form is submitted.

When the user clicks either button, the form data is submitted to the "submit.php" script using the POST method. On the server-side, the script can check the value of the "submit" parameter to determine which button was clicked and take appropriate action based on the value. For example:

 

if ($_POST['submit'] == 'Save as Draft') {
  // Code to save the form data as a draft
} else if ($_POST['submit'] == 'Submit') {
  // Code to process the form data and submit it for final processing
}

 

Note that this is just an example of how you might handle multiple submit buttons in a form, and the specific implementation will depend on your server-side programming language and framework.

 

Quote
Topic starter Posted : 13/02/2023 10:50 am
(@administrator)
Member Admin
<style>
 .button {
 float: right;
 }
 </style>
 
<!-- form start-->
 <form action="action" method="get">
 <input type="text" name="abcde">
 <div id="buttons">
 <input type="submit" class="button" name="next" value="Next Page">
 <input type="submit" class="button" name="prev" value="Prev Page">
 <div style="clear:both"></div>
 </div>
 </form>
<!-- form end-->
ReplyQuote
Topic starter Posted : 13/02/2023 10:51 am
Share:
×