I am trying to achieve the output where I have a wrapper div which contains a label and an inner div, and within the inner div I have the form input.
My output should look like this:
<div class="form-group">
<label>Name:</label>
<div class="form-input">
<input type="text" />
</div>
</div>
Here is my current form object in php:
echo $this->Form->input('name', array(
'class' => 'form-input',
'div' => 'form-group',
'label' => array('class' => 'control-label')));
But this adds the class form-input to the actual input itself.
How would I be able to achieve this while still keeping true to the CakePHP way of doing things?
TIA!
Use input options 'before', 'after', 'between' http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html#options I haven't verified it, but I think it should look something like this:
echo $this->Form->input('name', array(
'between' => '<div class="form-input">',
'after' => '</div>',
'div' => 'form-group',
'label' => array('class' => 'control-label')));
What about this:
echo $this->Form->input('name', array(
'div' => 'form-group',
'before' => '<div class="form-input">',
'after' => '</div>',
'label' => array('class'=>'control-label')
));
I think this works.
Related
In CakePHP 2.0 I can actually add 'before', 'after' and 'separator' attributes to the radio button. The attributes will create a div element between my radio options. It seems like these options have been removed from CakePHP 3.0. How can I do that in CakePHP 3.0?
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="square-screening single-row screen-radio">
<?php echo $this->Form->input('q1',array(
'legend'=> false,
'type'=>'radio',
'options'=> $options,
'required'=>'required',
'before' => '<div class="radio-inline screen-center screen-radio">',
'separator' => '</div><div class="radio-inline screen-center screen-radio">',
'after' => '</div>',
)); ?>
</div>
</div>
You need to use FormHelper Templates. From migration guide:
The separator, between, and legend options have been removed from radio(). You can use templates to change the wrapping HTML now.
The div, before, after, between and errorMessage options have been removed from input().
so in your case use this
echo $this->Form->input('q1', [
'templates' => [
'radioWrapper' => '<div class="radio-inline screen-center screen-radio">{{label}}</div>'
],
'type' => 'radio',
'options' => $options,
'required' => 'required',
'label' => false
]);
See also:
Customizing the Templates FormHelper Uses
FormHelper Templates - default values
It so very easy.
You can use form helper.
Cake\View\Helper\FormHelper::radio(string $fieldName, array $options, array $attributes)
Using
echo $this->Form->radio(
'favorite_color',
[
['value' => 'r', 'text' => 'Red', 'style' => 'color:red;'],
['value' => 'u', 'text' => 'Blue', 'style' => 'color:blue;'],
['value' => 'g', 'text' => 'Green', 'style' => 'color:green;'],
]
);
Docs
I need to generate Radio button with cake php format like this
<div class="radioset gender">
<div>
<div>Male</div>
<label>
<input type="radio" name="sex" value="1"/>
</label>
</div>
<div>
<div>Female</div>
<label>
<input type="radio" name="sex" value="0"/>
</label>
</div>
I can not use
e($form->radio("User.sex",array(0=>"Male",1=>"Female"),array("legend"=>false)));
Because it can not generate HTML format that i want.
I use multi input like that
e($form->input( 'User.sex', array('type'=>'radio', 'options' => array(0=>""),'div'=>false, "error"=>false, 'label' => false ) ));
e($form->input( 'User.sex', array('type'=>'radio', 'options' => array(1=>""),'div'=>false, "error"=>false, 'label' => false ) ));
But when i submit form. Server can not get value.
Please help me how to do it.
Thanks.
Use this format:
echo $form->input('field', array(
'type' => 'radio',
'legend'=>'Group of Radio',
// 'after' => '--after--',
// 'between' => '--between---',
'separator' => '--separator--',
'default' => '--which is by default selected--',
'options' => array('Button One', 'Button Two')
));
you can do this with Separator. I.e
echo $this->Form->input('name', array( 'type' => 'radio',
'before' => '<div>',
'separator'=> '</div><div>',
'after' => '</div>',
'options' => $option,
'label' => true,
"legend" => false
)
);
I have a foreach that show many forms with the same action ending with diferente id's.
But, the tag <form> just appears in the first form. All others, the fields appears, but don't the <form>
I tried to put the id for the form different in the loop. But doesn't work.
The code:
<?php echo $this->Form->create(null, array(
'url' => array('controller' => 'menus', 'action' => 'aprovar', $procuracao['Attorney']['id']), 'id' => $procuracao['Attorney']['id']
)); ?>
<div class="control-group">
<label class="control-label">Alçada:</label>
<div class="controls">
<?php echo $this->Form->input ('alcada', array('type' => 'select', 'label' => FALSE, 'options' => array(
'Até 10.000' => 'Até 10.000',
'Até 50.000' => 'Até 50.000',
'Acima de 100.000' => 'Acima de 100.000',
'Acima de 500.000' => 'Até 500.000',),
'empty' => 'Selecione')); ?>
</div>
</div>
<div class="control-group">
<label class="control-label">Validade:</label>
<div class="controls">
<?php echo $this->Form->input('validade', array('label' => FALSE, 'type' => 'text')); ?>
</div>
</div>
<?php echo $this->Form->submit('Ok', array('class' =>'btn btn-success pull-left', 'div' => false)); ?>
</div>
The field "Alçada" and "Validade" appears correctly. But the tag <form> just appears in the first element.
You are not ending the form.
echo $this->Form->create(null, array(
'id' => 'your-form-'.$i, //that $i is the index of the foreach, for example
'url' => array('controller' => 'menus', 'action' => 'aprovar', $procuracao['Attorney']['id']), 'id' => $procuracao['Attorney']['id']
));
//all inputs and other stuff
echo $this->Form->end(array('label'=>'Ok', 'class' =>'btn btn-success pull-left', 'div' => false));
all that inside the foreach you're using.
Here is the reference of that function in the docs. But basically, it does this
Closes an HTML form, cleans up values set by FormHelper::create(), and
writes hidden input fields where appropriate
CakePHP's FormHelper is how you generate forms when making CakePHP applications. As one might assume, this includes generating input elements, like so:
$this->Form->input('abc');
Which will produce HTML something like this:
<div class="input text">
<label for="ModelAbc">Abc</label>
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
Now, sadly, Bootstrap wants something like the following:
<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>
How do I make CakePHP produce this output?
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.
Here's a solution for 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')); ?>
In case a field needs its own label:
<?php echo $this->Form->input('username', array('label' => array('text' => 'Your username', 'class' => 'col-lg-2 control-label'))); ?>
Here's one way:
<?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' => '')
)); ?>
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.
Applying the same principle as above to the form->end function as follows:
<?php echo $this->Form->end(array(
'label' => __('Submit'),
'class' => 'btn',
'div' => array(
'class' => 'control-group',
),
'before' => '<div class="controls">',
'after' => '</div>'
));?>
To produce:
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value="Submit">
</div>
</div>
small add for another comments:
if you whant add class and change label base text, you can write next
<?php echo $this->Form->input('Fieldname', array(
'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')
)); ?>
I had the same problem using slywalker / cakephp-plugin-boost_cake, I open a ticket and he had it fix in a few hours, he updated to 1,03 and told me to use it like this
<?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>'
)); ?>
I hope it helps some one else too
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' );
Luc Franken posted this link in his comment: http://github.com/slywalker/cakephp-plugin-boost_cake
It took me a while to notice it, so for those who are still looking for the simplest solution:
Simply add the CakePHP Bootstrap plugin from GitHub and let the helper do the job for you!
Is it possible to wrap the form element in a div AND the whole block (label, element, errors etc) in another div using the HtmlTag decorator? I'd like to use Twitter's Bootstrap with Zend_Form like so:
<div class="clearfix">
<label for="xlInput">X-Large Input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div>
Any ideas?
Try this (untested):
$element->setDecorators( array(
'Errors',
'ViewHelper',
array( array( 'wrapperField' => 'HtmlTag' ), array( 'tag' => 'div', 'class' => 'input' ) ),
array( 'Label', array( 'placement' => 'prepend' ) ),
array( array( 'wrapperAll' => 'HtmlTag' ), array( 'tag' => 'div', 'class' => 'clearfix' ) ),
) );
edit: Label was wrong; adjusted.
In reply to Ezequiel Muns, here's where it is in the documentation: http://framework.zend.com/manual/1.7/en/zend.form.elements.html#zend.form.elements.decorators Look for the callout section "Note: Using Multiple Decorators of the Same Type."