CakePHP 3: FormHelper to load <label> after <input>? - cakephp

Question

Is there any way to load <label> after <input>. By default CakePHP loads <label> before <input> like this:
Php Code:
<?php echo $this->Form->input('email', ['placeholder' => 'Email']); ?>
Generated Code:
<label for="email">Email</label>
<input name="email" placeholder="Enter your email" id="email" type="email">
But what do I when I would like to get it like this:
<input name="email" placeholder="Enter your email" id="email" type="email">
<label for="email">Email</label>
Is there a way to have this besides hacking something?

Answer 1

Templates
You can use the templating functionality, the template responsible for this is the formGroup one, which by default is {{label}}{{input}}.
echo $this->Form->input('email', [
'placeholder' => 'Email',
'templates' => [
'formGroup' => '{{input}}{{label}}'
]
]);
It's also possible to define form group tempaltes per input type, by following the naming convention that is the name of the type, followed by FormGroup. So for the email type that would be emailFormGroup.
echo $this->Form->create(null, [
'templates' => [
'emailFormGroup' => '{{input}}{{label}}',
'textFormGroup' => '{{input}}{{label}}'
// ...
]
]);
That way you can easily apply this option globally to specific types only.
See also Cookbook > Form Helper > Customizing the Templates FormHelper Uses
CSS
And of course you could also use CSS, there's tables
.input.email {
display: table;
width: 100%;
}
.input.email input {
display: table-header-group;
}
.input.email label {
display: table-footer-group;
}
flex-box ordering
.input.email {
display: flex;
flex-flow: column;
}
.input.email input {
order: 1;
}
.input.email label {
order: 2;
}
etc...

Answer 2

You will have to use the label() method of the FormHelper, like this:
<?php
echo $this->Form->input('email', ['placeholder' => 'Email', 'label' => false]);
echo $this->Form->label('email', 'Email');
?>

Answer 3

One other approach is to create a Custom helper and overwrite the existing one using the way #Choma suggested.
So you will have to add in your
//View/Helpers/MyCustomFormHelper.php
App::uses('FormHelper', 'View/Helper');
MyCustomFormHelper extends FormHelper{
public function input($fieldName, $options) {
$defaults = array_merge($options, array('label' => false))
echo parent::input($fieldName, $defaults);
echo parent::label(fieldName);
}
}
//AppController.php
class AppController extends Controller {
public $helpers = array(
'Form' => array(
'className' => 'MyCustomFormHelper'
)
);
}
Or you could use the after option and for doing it more easy again inside your own helper.
//View/Helpers/MyCustomFormHelper.php
App::uses('FormHelper', 'View/Helper');
MyCustomFormHelper extends FormHelper{
public function input($fieldName, $options) {
$after = parent::label(fieldName);
$defaults = array_merge($options, array(
'label' => false,
'after' => $after,
));
return parent::input($fieldName, $defaults);
}
//or do not overwrite the input function and use a custom one
public function inputLabelAfter($fieldName, $options) {
...
...
}
}
I am sorry if the code has errors I haven't tested it but I think you got the picture and gave you more ideas.
Edit: I hadn't seen that this is for CakePHP 3.x. The above example is for 2.x but I believe that it will do.

Answer 4

Using templates is the right way to go - I hope this helps...
$this->Form->templates([
'nestingLabel' => '{{input}}<label{{attrs}}>{{text}}</label>',
'formGroup' => '{{input}}{{label}}',
]);
Moving Checkboxes & Radios Outside of a Label