Question

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

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

模板

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

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

通过遵循作为类型名称的命名约定，然后FormGroup，还可以为每个输入类型定义表单组tempaltes。因此对于email的{{1}}类型。

emailFormGroup

通过这种方式，您可以轻松地将此选项全局应用于特定类型。

另请参阅 Cookbook > Form Helper > Customizing the Templates FormHelper Uses

CSS

当然你也可以使用CSS，那里有桌子

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

弹性盒订购

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

等...

Answer 2

您必须使用FormHelper的{{3}}方法，如下所示：

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

Answer 3

另一种方法是创建一个自定义助手，并使用@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 4

使用模板是正确的方法 - 我希望这会有所帮助...

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

Moving Checkboxes & Radios Outside of a Label

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

4 个答案:

模板

CSS