CakePHP 3：在 <input> 之后加载 <label> 的 FormHelper？

Question

有没有办法在 <input> 之后加载 <label>。默认情况下，CakePHP 在 <input> 之前加载 <label>，如下所示：

Php代码：

<?php echo $this->Form->input('email', ['placeholder' => 'Email']); ?>

生成的代码：

<label for="email">Email</label>
<input name="email" placeholder="Enter your email" id="email" type="email">

但是当我想这样得到它时我该怎么办:

<input name="email" placeholder="Enter your email" id="email" type="email">
<label for="email">Email</label>

除了黑客攻击之外，还有其他办法吗？

Answer 1

您将不得不使用 FormHelper 的 label() 方法，如下所示：

<?php
echo $this->Form->input('email', ['placeholder' => 'Email', 'label' => false]);
echo $this->Form->label('email', 'Email');
?>

Answer 2

另一种方法是创建自定义助手并使用@Choma 建议的方式覆盖现有助手。

因此您必须添加

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

或者您可以使用 after 选项并在您自己的助手中再次更轻松地完成它。

//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) {
    ...
    ...
    }

}

如果代码有错误，我很抱歉，我没有测试过，但我认为你得到了图片并给了你更多的想法。

编辑：我没有看到这是针对 CakePHP 3.x 的。上面的示例适用于 2.x，但我相信它可以。

Answer 3

模板

您可以使用模板功能，负责此操作的模板是 formGroup，默认情况下是 {{label}}{{input}}。

echo $this->Form->input('email', [
    'placeholder' => 'Email',
    'templates' => [
        'formGroup' => '{{input}}{{label}}'
    ]
]);

也可以为每个输入类型定义表单组模板，方法是遵循类型名称后跟 FormGroup 的命名约定。所以对于 email 类型来说就是 emailFormGroup.

echo $this->Form->create(null, [
    'templates' => [
        'emailFormGroup' => '{{input}}{{label}}',
        'textFormGroup' => '{{input}}{{label}}'
        // ...
    ]
]);

这样您就可以轻松地将此选项全局应用到特定类型。

另见 Cookbook > Form Helper > Customizing the Templates FormHelper Uses

CSS

当然你也可以使用 CSS，这里有表格

.input.email {
    display: table;
    width: 100%;
}
.input.email input {
    display: table-header-group;
}
.input.email label {
    display: table-footer-group;
}

弹性框排序

.input.email {
    display: flex;
    flex-flow: column;
}
.input.email input {
    order: 1;
}
.input.email label {
    order: 2;
}

等...

Answer 4

使用模板是正确的方法 - 希望对您有所帮助...

 $this->Form->templates([
        'nestingLabel' => '{{input}}<label{{attrs}}>{{text}}</label>',
        'formGroup' => '{{input}}{{label}}',
 ]);

Moving Checkboxes & Radios Outside of a Label

CakePHP 3：在 <input> 之后加载 <label> 的 FormHelper？

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

cakephp

cakephp-3.0

模板

CSS