Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

User:Frank Ralf/Semantic HTML5: Difference between revisions

From MoodleDocs
Line 17: Line 17:
$mform->addElement('header', 'checkboxes', 'checkboxtest');
$mform->addElement('header', 'checkboxes', 'checkboxtest');
$mform->addElement(
$mform->addElement(
   'checkbox',
   'checkbox',                                 // type of input element
   'TEACHER',
   'TEACHER',                                   // "name" attribute of input element
   'Mr. Smith',
   'Mr. Smith',                                 // label to the left 
   'History',                    
   'History',                                   // label to the right
   array('class'=>'pe_teacher', 'id'=> 'SMITH')
   array('class'=>'pe_teacher', 'id'=> 'SMITH') // additional attributes   
   );
   );



Revision as of 09:29, 19 June 2009

Read the whole story:

  1. Frank Ralf/Moodle HTML
  2. Frank Ralf/Semantic HTML2
  3. Frank Ralf/Semantic HTML3
  4. Frank Ralf/Semantic HTML4
  5. formslib - Checkboxes: A Case of "Divitis"?


formslib - checkboxes: A case of "Divitis"?

Working with forms proves a bit difficult due to the way formslib.php renders the individual form items. Let's look at a simple example (inspired by the General Developer forum discussion on "Interface design input please").

Example PHP

$mform->addElement('header', 'checkboxes', 'checkboxtest'); $mform->addElement(

 'checkbox',                                  // type of input element
 'TEACHER',                                   // "name" attribute of input element
 'Mr. Smith',                                 // label to the left  
 'History',                                   // label to the right
 array('class'=>'pe_teacher', 'id'=> 'SMITH') // additional attributes     
 );

$mform->addElement(

 'checkbox',                 
 'teachers',  
 'Ms. Miller',
 'Math',                         
 array('class'=>'pe_teacher', 'id'=> 'miller') 
 );

Screenshots

That looks quite unsuspicious, but you might already see that the labels on the left and right side of the checkbox don't line up correctly:

Formslib checkboxes.png

So let's add some color by CSS to see the details:

fieldset#checkboxes {background-color: yellow;}

legend {background-color: lime;} div.fcontainer {background-color: blue;} div.fitem {background-color: red;} div.fitemtitle {background-color: silver;} label {background-color: aqua;} div.felement {background-color: teal;} span {background-color: orange;} input.pe_teacher {background-color: fuchsia; border: 3px dotted purple;}

Formslib checkboxes-colorful.png

With some margings and padding added by the following CSS it's becoming clearer:

fieldset#checkboxes * {margin: 5px; padding: 5px;}

Formslib checkboxes colorful-with-margins.png

Output HTML

So let's have a closer look at the markup Moodle provides (only first form item shown):

<fieldset class="clearfix" id="checkboxes">

 <legend class="ftoggler">Checkbox Test</legend>

</fieldset>

What's the problem?

  • Given class ("pe_teacher") does have no effect at all.
  • Alignment issue with the two labels.
  • Makes DOM traversal with JavaScript difficult.
  • Possibly accessibility issues.
  • Our ID got an extra "id_" prepended (because we're overriding some automatically generated ID).
  • No inline elements allowed in form elements [?]

The culprit

The rendering of form elements is defined in formslib.php by the function MoodleQuickForm_Renderer() in the _elementTemplates variable ('default' =>):

   <label>{label}
     {req}
     {advancedimg}{help}
   </label>
     {error}
     
{element}

See also

Moodle Tracker:

  • MDL-10505 "Add group name to rendered elements for better CSS control"
  • MDL-11134 "Help links in forms are outside the <label> - they will be ignored in JAWS forms mode"

Online resources: