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

Inconsistent markup for forms

    XMLWordPrintable

    Details

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

      Description

      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.

      http://twitter.github.com/bootstrap/base-css.html#forms

      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.

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                Created:
                Updated:
                Resolved: