Form checkbox and label with CakePHP and Bootstrap - cakephp

Question

I'm having some issues trying to get checkbox inputs and labels to output the correct HTML using CakePHP and Twitter Bootstrap.
The Bootstrap specific output should be:
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Keep me logged in
</label>
</div>
</div>
However, using the inputDefaults mentioned here (http://stackoverflow.com/a/9496242/1247225), this Cake form input:
echo $form->input('auto_login', array(
'type' => 'checkbox',
'label' => __('Keep me logged in', true)));
Outputs this:
<div class="control-group">
<input type="hidden" name="data[User][auto_login]" id="UserAutoLogin_" value="0" />
<input type="checkbox" name="data[User][auto_login]" class="" value="1" id="UserAutoLogin" />
<div class="controls">
<label for="UserAutoLogin">Keep me logged in</label>
</div>
</div>
Any ideas how to adjust this individual input so it outputs the correct Bootstrap HTML, like above?

Answer 1

The best way to control the form output, or the format of the output, is by passing a 'format' argument. Try playing with this:
'format' => array('before', 'label', 'input', 'between', 'after', 'error')
I don't think it is document, but by reading the code, you can find it in there.

Answer 2

the prettiest way to do it is this:
<?php
echo '<div class="col-lg-2">';
echo $this->Form->input('Content.checkbox', array(
'div' => array(
'class' => 'input-group',
),
'label' => false,
'type' => 'checkbox',
'before' => '<span class="input-group-addon">',
'after' => '</span><span class="input-group-addon"><label for="ContentCheckbox">What does the fox say?</label></span>',
));
echo '</div>';

Answer 3

I using :
<?php
echo $this->Form->input('coupDeCoeur',
array('div' => false,
'label' => false,
'type' => 'checkbox',
'before' => '<label class="checkbox">',
'after' => '<i></i>coupDeCoeur</label>'
));
?>

Answer 4

You need to build the form widget manually for checkboxes instead of using FormHelper::input.
For example:
echo '<div class="control-group">';
echo $this->Form->label('Model.field', null, array('class' => 'control-label'));
echo '<div class="controls">';
echo $this->Form->checkbox('Model.field');
echo '</div>';
echo '</div>';

Answer 5

Try following code:
<div class="control-group">
<div class="controls">
<label class="checkbox">
<?php echo $this->Form->input('auto_login', array('type'=>'checkbox','label' => false, 'div' => false,'class'=>false,'after'=>__('Keep me logged in')));?>
</label>
</div>
</div>

Answer 6

If you're using security component, you may have problems if you create your inputs without FormHelper::input. If that's the case, you should try with this:
echo "
<div class='control-group'>
<div class='controls'>
<label class='checkbox'>";
echo $this->Form->input('Model.field', array('label' => false, 'after' => 'Model.field'))."
</label>
</div>
</div>";

Answer 7

Here is the ready-to-use solution:
App::uses('FormHelper', 'View/Helper');
class InputHelper extends FormHelper {
// var $helpers = array('Form', 'Html');
public function create($model, $options = array()) {
$options['class'] = (isset($options['class']) && $options['class']) ? $options['class'] : 'form-horizontal table';
$options['inputDefaults'] = (isset($options['inputDefaults']) && $options['inputDefaults']) ? $options['inputDefaults'] : array(
'div' => 'control-group',
'label' => array('class' => 'control-label'),
'between' => '<div class="controls">',
'after' => '</div>'
);
return parent::create($model, $options);
}
public function input($fieldName, $options = array()) {
$this->setEntity($fieldName);
$options = $this->_parseOptions($options);
if ($options['type'] == 'checkbox') {
$options['format'] = array('before', 'label', 'between', 'input', 'after', 'error');
}
fdebug($options);
return parent::input($fieldName, $options);
}
}

Answer 8

If you want a "one line" answer i got it:
echo $this->Form->input('Model.Field', array('class'=>'form-inline', 'after'=>'</br>'));

Answer 9

In my case, I used AdminLTE template with Bootstrap 3 and this code was working for me:
<?php
echo $this->Form->input('Model.fieldname', array(
'label' => false,
'type' => 'checkbox',
'before' => '<label>',
'after' => 'Field name label here</label>',
));
?>
Good luck here!!!

Answer 10

Here's a simple solution that works for me:
The CSS (LESS):
input.form-control[type="checkbox"] {
width: auto;
height: auto;
margin-right: 5px;
display: inline;
}
Then use the Form helper:
echo $this->Form->input(
'field_name',
array(
'div' => 'form-group',
'class' => 'form-control',
'type' => 'checkbox',
'label' => array(
'text' => 'Your label',
'class' => 'label-checkbox'
),
'format' => array('input', 'label')
)
);