Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-34297

Inconsistent markup for forms



    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Won't Fix
    • Affects Version/s: 2.3
    • Fix Version/s: None
    • Component/s: Forms Library
    • Labels:
    • Affected Branches:


      Moodle seems to have at least three different markups for laying out forms.

      for editing your profile the following structure is used:

      form.mform contains multiple "fieldset"s, which contain a legend and a div.fcontainer, which in turn contains multiple ".fitem"s, which each in turn contain an .ftitle and an .felement inside which you find the label and the form control respectively.

      for many admin tasks a very similar but differently named structure is used e.g. for location settings:

      form#adminsettings contains a single fieldset without a legend, h3.mains are used to break up sections instead. The fieldest contains multiple ".form-item"s, which each in turn contain a form-label and a form-setting followed by a form-description.

      The two forms are fairly similar, and also share a core structure with Twitter Bootstrap forms. I'd suggest adopting their naming convention and CSS, specifically in this case the "horizontal form" format, though their simpler form formats would be useful for other areas throughout Moodle too.


      The translation would be something like:

      bootstrap: form.form-horizontal > fieldset + legend > div.control-group > div.control-label + div.controls > p.help-block
      moodle-A: form.mform > fieldset + legend > div.fitem > div.ftitle + div.felement ~ div.fstatic
      moodle-B: form div.settingsform > fieldset + h3.main > div.form-item > div.form-label + div.form-setting + form-description

      There's subtle changes e.g. putting the help text inside the control section, rather than beside it or in a dummy control below it, but it mostly translates quite easily.

      A good first step would be to add the consistent names, even if the existing ones are kept too for compatability though I don't think there'd be much disruption from just changing over in one go, but it's worth checking that out first.

      The third layout used in Moodle is the new file-picker code which seems to have just used table rows and td cells to layout the forms, that could also be ported.


          Issue Links



              Unassigned Unassigned
              bawjaws David Scotson
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
              0 Vote for this issue
              2 Start watching this issue