[Proposal][Standard][UX] Forms
 [UX][Standards] Vertical Forms + (Primary / Secondary) Buttons

Style Standards for Forms


Vertical Layout


Inline Layout




  • Use uppercase bold fonts for input field labels (uppercase for Colibri)
  • Use <label> tags to associate labels with inputs
  • Do not put labels/hints inside fields on web forms, put it outside 
  • Consistent use of colons at the ends of labels (no colons)
  • Consistent use of sentence ("Sentence case") or title case ("Title Case") (uppercase for Colibri)
  • Required field indicator: Use the alt-text ?required?;
    • Always indicate required + miss for optional
    • If all fields are required don't mark them
  • Use the tabindex attribute to provide a ?tabbing? path
  • Provide hints with a secondary/non intrusive style 



  • Use fixed lengths for predefined fields or use 100% within the container (the container can have a fixed width)
    • Field lengths can provide valuable affordances (ex. credit card, telephone, etc.)
    • Random field lengths may add visual noise to a form
    • Make the default value for a drop-down list box the label
    • Use dl/dt/dd for forms structure



  • Label the button with what it does
  • Primary / Secondary Actions
    • Primary actions: the most important action on the form (completion) (?Submit?, ?Save?, or ?Continue?)
    • Secondary actions: are less utilized and most often allow people to retract the data they?ve entered (?Cancel?, ?Reset?, or ?Go Back?)
  • Make sure that the SUBMIT button cannot be confused with destructive buttons
  • Input (submitinput) vs. Link (ahref):
    • Raluca: "Using buttons is mandatory for the cases where JavaScript is disabled. That's because by default a form can be submitted only through an input of type 'submit'. Links are usually used for redirecting to another page, not for submitting the form."
    • Sergiu: "Some buttons are done with links, since their action is not a submit action. I'm talking about most Cancel buttons, which shouldn't send the form content back to the server. Implementing them as submitinput will send the form content to the server. Sending the form content to the server means more transfer time (sending bytes through the network), more memory and processing time (allocating memory for holding the request data, allocating time for processing the request)."

 Errors / Success 


  • Clearly communicate the error that occurred
  • Top placement, visual contrast
  • After successful form completion confirm success

 Other Considerations 


  • Label: the text that stands for a question ("Phone")
  • Hint/Description: an extra piece of text that helps to explain the label ("(XXX) XXXX - XXXX")
  • Default: a value that is already entered for the user ("(990) 8972 - 1234")


  • Users often abandon forms or lie on them because of:
    • Questions that they don?t understand
    • Questions that they have no answer for
    • Intrusive questions that are inappropriate to the task
    • Validations that refuse their preferred or correct answer




Get Connected