drupal theming – Agregar div solo a las casillas de verificación

Pregunta:

Me gustaría agregar un <div> que solo contenga casillas de verificación. La salida que quiero es similar a la siguiente.

<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>

En template.php tengo THEME_form_alter() con el siguiente código.

  $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',
  );

¿Cómo debo escribir THEME_form_alter() para obtener la salida HTML que quiero?

Respuesta:

Con los elementos de formulario que está utilizando, el resultado que obtiene es el siguiente.

<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"> se ajusta a todos los elementos porque es un prefijo para $form['basic'] , que contiene todos los elementos del formulario.

Usaría el siguiente código.

  $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',
  );

Su salida es la siguiente.

<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>

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım