lilhermit - Usando CakePHP FormHelper con Bootstrap Forms

friendsofcake

Question

FormHelper de CakePHP es la forma en que se generan formularios al hacer aplicaciones CakePHP. Como uno podría suponer, esto incluye la generación de elementos de entrada, de esta manera:

$this->Form->input(''abc'');

Que producirá HTML algo como esto:

<div class="input text">
  <label for="ModelAbc">Abc</label>
  <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>

Ahora, lamentablemente, Bootstrap quiere algo como lo siguiente:

<div class="control-group">
  <label for="ModelAbc" class="control-label">Abc</label>
  <div class="controls">
    <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
  </div>
</div>

¿Cómo hago para que CakePHP produzca esta salida?

Answer 1

Aplicando el mismo principio que el anterior a la función form-> end de la siguiente manera:

<?php echo $this->Form->end(array(
    ''label'' => __(''Submit''),
    ''class'' => ''btn'',
    ''div'' => array(
        ''class'' => ''control-group'',
        ),
    ''before'' => ''<div class="controls">'',
    ''after'' => ''</div>''
));?>

Para producir:

<div class="control-group">
  <div class="controls">
    <input class="btn" type="submit" value="Submit">
  </div>
</div>

Answer 2

Aquí hay una forma:

<?php echo $this->Form->create(null, array(
    ''inputDefaults'' => array(
        ''div'' => array(''class'' => ''control-group''),
        ''label'' => array(''class'' => ''control-label''),
        ''between'' => ''<div class="controls">'',
        ''after'' => ''</div>'',
        ''class'' => '''')
)); ?>

Answer 3

Aquí hay una solución para Bootstrap 3

<?php echo $this->Form->create(''User'', array(
''class'' => ''form-horizontal'', 
''role'' => ''form'',
''inputDefaults'' => array(
    ''format'' => array(''before'', ''label'', ''between'', ''input'', ''error'', ''after''),
    ''div'' => array(''class'' => ''form-group''),
    ''class'' => array(''form-control''),
    ''label'' => array(''class'' => ''col-lg-2 control-label''),
    ''between'' => ''<div class="col-lg-3">'',
    ''after'' => ''</div>'',
    ''error'' => array(''attributes'' => array(''wrap'' => ''span'', ''class'' => ''help-inline'')),
))); ?>
<fieldset>
    <legend><?php echo __(''Username and password''); ?></legend>
    <?php echo $this->Form->input(''username''); ?>
    <?php echo $this->Form->input(''password''); ?>
</fieldset>
<?php echo $this->Form->end(__(''Login'')); ?>

En caso de que un campo necesite su propia etiqueta:

<?php echo $this->Form->input(''username'', array(''label'' => array(''text'' => ''Your username'', ''class'' => ''col-lg-2 control-label''))); ?>

Answer 4

Inspirado por la respuesta de Lericson, esta es mi solución final para CakePHP 2.x:

<?php echo $this->Form->create(''ModelName'', array(
    ''class'' => ''form-horizontal'',
    ''inputDefaults'' => array(
        ''format'' => array(''before'', ''label'', ''between'', ''input'', ''error'', ''after''),
        ''div'' => array(''class'' => ''control-group''),
        ''label'' => array(''class'' => ''control-label''),
        ''between'' => ''<div class="controls">'',
        ''after'' => ''</div>'',
        ''error'' => array(''attributes'' => array(''wrap'' => ''span'', ''class'' => ''help-inline'')),
    )));?>
<fieldset>
<?php echo $this->Form->input(''Fieldname'', array(
    ''label'' => array(''class'' => ''control-label''), // the preset in Form->create() doesn''t work for me
    )); ?>
</fieldset>
<?php echo $this->Form->end();?>

Que produce:

<form...>
<fieldset>
<div class="control-group required error">
    <label for="Fieldname" class="control-label">Fieldname</label>
    <div class="controls">
        <input name="data[Fieldname]" class="form-error" maxlength="255" type="text" value="" id="Fieldname"/>
        <span class="help-inline">Error message</span>
    </div>
</div>
</fieldset>
</form>

Básicamente, agregué las teclas ''formato'' y ''error'', y agregué la clase de etiqueta de control al elemento de etiqueta.

Answer 5

Luc Franken publicó este enlace en su comentario: http://github.com/slywalker/cakephp-plugin-boost_cake

Me tomó un tiempo darme cuenta, así que para aquellos que todavía están buscando la solución más simple:

¡Simplemente agregue el complemento CakePHP Bootstrap de GitHub y deje que el ayudante haga el trabajo por usted!

Answer 6

Para que funcione con una forma horizontal en bootstrap con bootswatch tuve que usar:

echo $this->Form->create(
    ''User'',
    array(
        ''action''        => ''add'',
        ''admin''         => ''false'',
        ''class''         => ''form-horizontal'',
        ''inputDefaults'' => array(
            ''format''  => array( ''before'', ''label'', ''between'',
                                ''input'', ''error'', ''after'' ),
            ''class'' => ''form-control'',
            ''div''     => array( ''class'' => ''form-group'' ),
            ''label''   => array( ''class'' => ''col-lg-2 control-label'' ),
            ''between'' => ''<div class="col-lg-10">'',
            ''after''   => ''</div>'',
            ''error''   => array( ''attributes'' => array( ''wrap''  => ''span'',
                                                       ''class'' => ''text-danger'' ) ),
        )
    )
);

Entonces puedes usarlo como siempre:

echo $this->Form->input( ''User.username'' );

Answer 7

Su respuesta es correcta, pero para el beneficio de otros usuarios hay otros ajustes que puede hacer para aprovechar el error / texto de ayuda:

Agregue form-horizontal a la class en Form->create() para formularios más compactos (etiquetas a la izquierda de la entrada, en lugar de en la parte superior)

Aquí se explica cómo colocar el texto de ayuda debajo de un campo (debe hacerse para cada campo), sin olvidar cerrar </div> .

echo $this->Form->input(''field_name'', array(
            ''after''=>''<span class="help-block">This text appears 
               underneath the input.</span></div>''));

y para mostrar correctamente los errores:

// cake 2.0
echo $this->Form->input(''abc'', array(
    ''error'' => array(''attributes'' => array(''class'' => ''controls help-block''))
));

Productos:

<div class="control-group required error">
  <label for="ModelAbc" class="control-label">Abc</label>
  <div class="controls">
    <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
  </div>
  <!-- error message -->
  <div class="controls help-block">This is the error validation message.</div>
  <!-- error message -->
</div>

Es un margen adicional y no tan limpio como el bootstrap, pero es una solución rápida. La alternativa es hacer cada mensaje de error individualmente.

y se alinea muy bien. Sin embargo, no he descubierto una manera fácil de utilizar mensajes en inline .

Answer 8

Tuve el mismo problema al usar slywalker / cakephp-plugin-boost_cake, abrí un ticket y lo arregló en unas pocas horas, actualizó a 1,03 y me dijo que lo use así

<?php echo $this->Form->input(''email'', array(
    ''label'' => array(
        ''text'' => __(''Email:''),
    ),
    ''beforeInput'' => ''<div class="input-append">'',
    ''afterInput'' => ''<span class="add-on"><i class="icon-envelope"></i></span></div>''
)); ?>

Espero que ayude a alguien más también

Answer 9

pequeño agregar para otros comentarios:

si quieres agregar clase y cambiar el texto base de la etiqueta, puedes escribir a continuación

<?php echo $this->Form->input(''Fieldname'', array(
    ''label'' => array(''class'' => ''control-label'',''text''=>''HERE YOU LABEL TEXT'')
)); ?>