• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Forms

    Form elements, fieldsets, inputs and legends

    All forms need to have a <fieldset> and <legend> to meet accessibility requirements. class="no-border" can be applied to <fieldset> for a simplier style.

    Fieldset Legend

    Form element

    This is an example form. It doesn't do anything but it looks nice and shows how to use the different elements.

    Radio buttons:

    Checkboxes:

    Vertical labels

    The placeholder attribute can be used on forms to place example text inside the field. This works in IE10+, Firefox, Safari, Chrome. It should only be used to provide example text and not to replace the label because it isn't fully supported.

    Your details

    Horizontal labels

    Labels can be placed beside fields by adding the classes .right and .inline to the labels. Use column classes to set width of label and field columns.

    Postal address
    Forms
    Previous (DS Inception)Next (Drupal Glossary)