3

I would like to add a <div> containing only checkboxes. The output I want is similar to the following.

<div class="a">
  <label for="check1">1</label><input type="checbox" id="check1" name="check1">
  <label for="check1">1</label><input type="checbox" id="check2" name="check2">
  <label for="check1">1</label><input type="checbox" id="check3" name="check3">
</div>
<div class="text"><input type="text" id="text" name="text"></div>
<div class="submit"><input type="submit" value="submit"></div>

In template.php I have THEME_form_alter() with the following code.

  $form['basic'] = array(
    '#prefix'=> '<div class="a"><ul>',
    '#suffix'=> '</ul></div>'
  );

  $form['basic']['keys']['check1'] = array(
    '#prefix' => '<li><label for="check1">Check1',
    '#suffix' => '</li></label>',
    '#type'=>'checkbox',
    '#value' =>'0',
    '#pre_render' => '',
    '#id' => 'check1',
    '#name' => 'check1'
  );

  $form['basic']['keys']['check2'] = array(
    '#prefix' => '<li><label for="check2">Check2',
    '#suffix' => '</li></label>',
    '#type'=> 'checkbox',
    '#value' =>'0',
    '#pre_render' => '',
    '#id' => 'check2',
    '#name' => 'check2'
  );

  $form['basic']['keys']['check3'] = array(
    '#prefix' => '<li><label for="check3">Check3',
    '#suffix' => '</li></label>',
    '#type'=> 'checkbox',
    '#value' => '0',
    '#pre_render' => '',
    '#id' => 'check3',
    '#name' => 'check3'
  );

  $form['basic']['keys']['text'] = array(
    '#prefix' => '<div class="text">',
    '#suffix' => '</div>',
    '#type'=> 'textfield',
  );

How should I write THEME_form_alter() to be obtain the HTML output I want?

1

With the form elements you are using, the output you obtain is the following one.

<div class="a">
  <ul>
    <li>
      <label for="check1">
        Check1
        <div class="form-item form-type-checkbox form-item-check1">
          <input type="checkbox" id="check1" name="check1" value="1" class="form-checkbox">
        </div>
      </label>
    </li>
    <li>
      <label for="check2">
        Check2
        <div class="form-item form-type-checkbox form-item-check2">
          <input type="checkbox" id="check2" name="check2" value="1" class="form-checkbox"> 
        </div>
      </label>
    </li>
    <li>
      <label for="check3">
        Check3
        <div class="form-item form-type-checkbox form-item-check3">
          <input type="checkbox" id="check3" name="check3" value="1" class="form-checkbox"> 
        </div>
      </label>
    </li>
    <div class="text">
      <div class="form-item form-type-textfield form-item-text">
        <input type="text" id="edit-text" name="text" value="" size="60" maxlength="128" class="form-text">
      </div>
    </div>
  </ul>
</div>

<div class="a"> is wrapped to all the elements because it's a prefix for $form['basic'], which contains all the form elements.

I would use the following code.

  $form['basic']['keys']['check1'] = array(
    '#type'=> 'checkbox',
    '#title' => 'Check1',
    '#value' => '0',
    '#pre_render' => array(),
    '#prefix'=> '<div class="a"><ul><li>',
    '#suffix' => '</li>',
  );

  $form['basic']['keys']['check2'] = array(
    '#type'=> 'checkbox',
    '#title' => 'Check2',
    '#value' => '0',
    '#pre_render' => array(),
    '#prefix' => '<li>',
    '#suffix' => '</li>',
  );

  $form['basic']['keys']['check3'] = array(
    '#type'=> 'checkbox',
    '#title' => 'Check3',
    '#value' => '0',
    '#pre_render' => array(),
    '#prefix' => '<li>',
    '#suffix' => '</li></ul></div>'
  );

  $form['basic']['keys']['text'] = array(
    '#prefix' => '<div class="text">',
    '#suffix' => '</div>',
    '#type'=> 'textfield',
  );

Its output is the following one.

<div class="a">
  <ul>
    <li>
      <div class="form-item form-type-checkbox form-item-check1">
        <input type="checkbox" id="edit-check1" name="check1" value="1" class="form-checkbox">       
        <label class="option" for="edit-check1">Check1 </label>
      </div>
    </li>
    <li>
      <div class="form-item form-type-checkbox form-item-check2">
        <input type="checkbox" id="edit-check2" name="check2" value="1" class="form-checkbox">  
        <label class="option" for="edit-check2">Check2 </label>
      </div>
    </li>
    <li>
      <div class="form-item form-type-checkbox form-item-check3">
        <input type="checkbox" id="edit-check3" name="check3" value="1" class="form-checkbox">  
        <label class="option" for="edit-check3">Check3 </label>
      </div>
    </li>
  </ul>
</div>
<div class="text">
  <div class="form-item form-type-textfield form-item-text">
    <input type="text" id="edit-text" name="text" value="" size="60" maxlength="128" class="form-text">
  </div>
</div>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.