Forms Layout Types

• Layout Types
  • Vertical Labels 
  • Left-Justified Horizontal Labels
  • Right-Justified Horizontal Labels
  • Inline Layout
• Separating Related Content

Placement

Mario Penzo’s recommendation: "Place labels above or right-align them”, Penzo, M (2006) Label Placement in Forms

1. Vertical Labels & Advantages

2. Left-Justified Horizontal Labels & Advantages

3. Right-Justified Horizontal Labels & Advantages

X. Inline Layout

• Custom defined for XWiki
• For small inline forms
  • used when we don't want to increase the vertical size of the component
• This is a special case of forms and should not be used abusively 
• Learn more about Inline Small Form Component
  

Grouping

• Grouping: Use relevant content groupings to organize forms
  • Consider <fieldset> to group related form fields

 Separating Related Content