Developer

Form Buttons

Place form buttons that trigger actions either below the last entry field at the end of the form, or if there are multiple forms for each section, below the form entry fields in the section.

The form button layouts are:
  • Form buttons that are associated with entry fields – standard and most typical forms with labels and entry fields. The layout for these forms aligns the buttons vertically with the entry fields. Create these form buttons using code similar to:
    <div class = "column">    
     <div class = "formAction">    
     <input type = "submit" wicket:id = "submit" wicket:message = "value:Save" />    
     <input type = "submit" class = "submitForm" wicket:id = "save" wicket:message = "value:Save" />   
     </div>    
    </div>


    Standard Form Buttons

  • Form buttons that are associated with nonstandard entry forms – forms that may not have entry fields, for example, buttons that are aligned at the bottom of a list table:
    <div class = "column">   
     <div class = "buttonWrap">    
     <input type = "submit" wicket:id = "submit" wicket:message = "value:Save" />    
     <input type = "submit" class = "submitForm" wicket:id = "save" wicket:message = "value:Save" />    
     </div>    
    </div>

When considering form button order, place buttons that have positive actions first, followed by negative or other actions. For example, place a Save button to the left of a Cancel button. This allows the positive action to be associated with the natural next step.

Use standard text labels for form buttons, such as Continue or Cancel.