Using CakePHP FormHelper with Bootstrap Forms

Question

CakePHP\'s FormHelper is how you generate forms when making CakePHP applications. As one might assume, this includes generating input elements, like so:

$thi         


        

Answer 1

Inspired by lericson's answer, this is my final solution for 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();?>

Which produces:

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

I basically added the 'format' and 'error' keys, and added the control-label class to the label element.

Answer 2

To get it working with a horizontal form in bootstrap with bootswatch I had to use:

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

Then you can just use it as normal:

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

Answer 3

Your answer is correct, but for the benefit of other users there's some other tweaks you can do to take advantage of the error/help text:

Add form-horizontal to class in the Form->create() for more compact forms (labels on the left of the input, rather than on top)

Here's how to put help text underneath a field (has to be done for each field), not forgetting to close the </div>.

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

and to correctly display errors:

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

Outputs:

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

It's extra mark-up and not as neat as bootstrap but it's a quick fix. The alternative is to do each error message individually.

and it lines up nicely. I haven't discovered an easy way to make use of inline messages yet however.