Form checkbox and label with CakePHP and Bootstrap

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?

score 5 · Answer 1 · edited Nov 12 '14 at 10:36

5

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.

edited Nov 12 '14 at 10:36

Carl0s1z

4,683
7
32
47

answered Mar 16 '13 at 12:19

Jeremiah Crouch

66
1
4

score 4 · Answer 2 · answered Jan 30 '14 at 14:27

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

score 3 · Answer 3 · answered Jan 20 '15 at 13:43

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

answered Jan 20 '15 at 13:43

laul

57
3

score 2 · Answer 4 · answered Feb 27 '14 at 19:02

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>

score 2 · Answer 5 · answered Mar 30 '12 at 21:38

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

score 1 · Answer 6 · answered Sep 07 '12 at 11:48

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

score 1 · Answer 7 · answered Mar 05 '14 at 18:40

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);
    }
}

score 1 · Answer 8 · answered Nov 30 '14 at 18:28

1

If you want a "one line" answer i got it:

echo $this->Form->input('Model.Field', array('class'=>'form-inline', 'after'=>'</br>'));

answered Nov 30 '14 at 18:28

Breno Mazieiro

21
1

score 1 · Answer 9 · answered May 25 '16 at 01:14

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

score 0 · Answer 10 · answered Jun 23 '14 at 14: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')
    )
);

Form checkbox and label with CakePHP and Bootstrap

10 Answers10

Linked