Multiple submit buttons on HTML form – designate one button as default

Default button: making it behave

To make your form behave with multiple submit buttons, several techniques and cautionary practices can be implemented and considered:

Invisible dummy buttons: hidden, not forgotten

When the default button isn't the first in the source code, a stealthy invisible dummy button (not really invincible) can be placed as the first submit button in your form. Give it the same name and value as the desired default button:

<form>
  <input type="text">
  <!-- Invisible hero; positioned first for the final move -->
  <button type="submit" name="action" value="default" style="display:none"></button>
  
  <!-- Other understudies -->
  <button type="submit" name="action" value="save">Save</button>
  <button type="submit" name="action" value="cancel">Cancel</button>
</form>


For this clandestine operation, CSS properties like display: none and visibility: hidden might not be ideal. They might turn our hero into a ghost to screen readers, hampering accessibility.

Utilizing the float: swimming against the current

Desiring to make the "Next" button the default without tampering with the source code or using JavaScript, CSS floats let you swim against the current and reverse the visual button flow:

.left { float: left; }  /* Using left as an alias */
.right { float: right; } /* Right isn't always right! */


<form>
  <!-- The usual suspects switched -->
  <button type="submit" class="left">Cancel</button> 
  <button type="submit" class="right">Next</button> 
  <!-- "Next" now leads on screen -->
</form>


Scripts: Words of Power

JavaScript, the magical language, or jQuery's .prepend() can advance behaviors. But don't let its charm disrupt the natural form flow and ruin accessibility. Try shifting the elements outside the viewport or use hidden overflow techniques:

$(document).ready(function() {
  $("<button type='submit' name='action' value='default'></button>")
    .css({position: "absolute", left: "-9999px", width: "1px", height: "1px", overflow: "hidden"})
    .prependTo("form");
});


Prioritize usability: User is King

Palace designs should prioritize the king. Likewise, position your main action button at a place that respects user expectations and best practices. Catering for different browsers and devices becomes essential, necessitating rigorous cross-browser testing to ensure consistent behavior.

Handling interaction and accessibility

Emphasizing usability and accessibility is crucial when working with multiple submit buttons. Your form should be easily used by every user, including those with disabilities.

Default button designation with CSS

To avoid confusion and improve usability, implement a distinct color or style for the default button. With CSS class, you can achieve this for your default button.

button.default {
  /* Styling for default button */
  font-weight: bold;
  border-color: #007bff;
  background-color: #007bff;
  color: white;
}


<form>
  <button type="submit" class="default">Submit</button>
  <button type="button">Another Action</button>
</form>


Type "button" for non-default buttons

Prevent accidental submits by explicitly setting the type of any other buttons to button. 


<form>
  <button type="submit" class="default">Submit</button>
  <button type="button">Save Draft</button>
  <button type="button">Preview</button>
</form>


Ensuring "Enter" key functionality

For any input field within the form, pressing Enter should trigger the default button. Testing this for multiple browsers and devices ensures a seamless user experience.

Scripts: Users over Wizards

Scripting solutions are cool, but they should be implemented with care. If you apply scripts to set the default button, ensure they don't disrupt user experience and mimic the functionality of the visible buttons.