Checkbox and Label with CakePHP and Bootstrap

Question

I'm having some problems trying to get checkboxes and tags for outputting the correct HTML using CakePHP and Twitter Bootstrap.

The Bootstrap specification 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 input values ​​shown here (http://stackoverflow.com/a/9496242/1247225), this form form input:

 echo $form->input('auto_login', array( 'type' => 'checkbox', 'label' => __('Keep me logged in', true))); 

Outputs the following:

  <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 set up this separate input so that it outputs the correct HTML bootstrap as above?

Answer 1

The best way to control form output or output format is to pass the argument to "format". Try playing with this:

 'format' => array('before', 'label', 'input', 'between', 'after', 'error') 

I don't think this is a document, but by reading the code you can find it there.

Answer 2

The most beautiful way to do 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 use:

 <?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 create a form widget manually for FormHelper::input instead of FormHelper::input .

For instance:

 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 the 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 use a security component, you may have problems if you create your inputs without FormHelper::input . In this case, you should try:

 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 a 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 need the answer "one line", I got it:

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

Answer 9

In my case, I used the AdminLTE template with Bootstrap 3, and this code worked 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 is a simple solution that works for me:

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