Cakephp 3.0 change or remove wrapping div on input form

13
votes

I am trying to remove or change the wrapping div that CakePHP uses on its form helper.

When I use this code:

 echo $this->Form->input('contact', ['label' => false]);

The output is:

<div class="input text">
  <input type="text" id="contact" maxlength="255" name="contact">
</div>

And what I want is:

<div class="myOwnClass">
  <input type="text" id="contact" maxlength="255" name="contact">
</div>

I used to do that on CakePHP 2 adding more options to the input method, however on the latest CakePHP version this isn't working. Any clues?

Thanks

3
phphtmlcakephpcakephp-3.0

3 Answers

32
votes

Use FormHelper Templates

To change wrapping for all inputs in form use:

$this->Form->templates([
    'inputContainer' => '<div class="myOwnClass">{{content}}</div>'
]);
// or remove completely
$this->Form->templates([
    'inputContainer' => '{{content}}'
]);
// now get input with desired wrapping
echo $this->Form->input('contact', [
    'label' => false
]);

To change wrapping for single input use:

echo $this->Form->input('contact', [
    'templates' => [
        'inputContainer' => '<div class="myOwnClass">{{content}}</div>'
    ],
    'label' => false
]);

For complete reference on templates read: Customizing the Templates FormHelper Uses

CakePHP 2 style of customizing the wrappings is not supported anymore in version 3. From migration guide:

The div, before, after, between and errorMessage options have been removed from input(). You can use templates to update the wrapping HTML. The templates option allows you to override the loaded templates for one input.

5
votes

I'm working with a UI purchased and there have been several problems with cakephp3. For me it is not so easy to remove the <div> initial, most to the solution provided here, after much testing:

echo $this->Form->control('username', [
  'templates'     => ['inputContainer' => '{{content}}'],
  "type"          => "text",
  "aria-invalid"  => "false",
  "aria-required" => "true",
  "class"         => "form-control valid",
  "placeholder"   => "Ingrese su usuario o email ...",
  "autocomplete"  => "on",
  'label'         => false
]);

the result

<input name="username" aria-invalid="false" aria-required="true" class="form-control valid" placeholder="Ingrese su usuario o email ..." autocomplete="on" id="username" type="text">

only adds an input tag (sorry for my Google-English)

3
votes

I think it is a better way to define the templates global in the config folder:

<?= $this->Form->create($user, array(
    "class" => "ui form", 
    "templates" => "semantic" // The filename in your config folder without .php
)); ?>

In the config folder create the file "semantic.php" (You can name it to whatever you want) with the content:

return array(
    "inputContainer" => '{{content}}' // Here the magic happens
);

Hope this helps!