html - 在 cakephp3 中格式化表单元素

Question

我如何对齐表单元素框出现的位置，因为我希望每个输入框至少右对齐，具有相同的字体等。我尝试使用模板，但最后我不知道它在说什么。

https://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses

   echo $this->Form->input('first_name',['label' => 'Tutor FirstName']);
    echo $this->Form->input('last_name',['label' => 'Tutor LastName']);
    echo $this->Form->input('email', ['label' => 'Email']);
    echo $this->Form->input('mobile', ['label' => 'Mobile']);
    echo $this->Form->input('home_phone',['label' => 'Home Phone']);
    echo $this->Form->input('work_phone',['label' => 'Work Phone']);

Answer 1

模板就是这样工作的。

在 src/Controller/AppController 或者你需要的地方

class AppController extends Controller
{
    public $helpers = [
        'Form'      => [
            'templates' => 'template_forms',
        ],
    ];

在源/配置

创建一个新文件“template_forms.php”

<?php
$config = [
    'checkboxFormGroup'   => '<div class="col-xs-5"><div class="checkbox">{{label}}</div></div>',
    'checkbox'            => '<input type="checkbox" value="{{value}}" {{attrs}}>',
    'checkboxWrapper'     => '<div class="form-group"><div class="col-sm-offset-5 col-xs-7">{{label}} {{input}}</div></div>',
    'inputContainer'      => '<div class="form-group" {{required}} >{{content}}</div><div class="hr-line-dashed"></div>',
    'input'               => '<div class="col-xs-7 col-sm-10 col-lg-10"><input class="form-control input-sm" type="{{type}}" name="{{name}}" {{attrs}}></div>',
    'label'               => '<label {{attrs}} class="col-xs-5 col-sm-2 col-lg-2 control-label">{{text}}</label>',
    'select'              => '<div class="col-xs-7 col-sm-10 col-lg-10"><select class="form-control input-sm" {{attrs}} name={{name}}>{{content}}<select></div>',
    'error'               => '<p class="text-danger">{{content}}</p>',
    'textarea'            => '<div class="col-xs-7 col-sm-10 col-lg-10"><textarea class="form-control input-sm" name="{{name}}" {{attrs}}>{{value}}</textarea></div>',
    'button'              => '<div class="form-group"><div class="col-md-12 col-xs-12 col-sm-12 text-center"><button {{attrs}} type="submit">{{text}}</button></div></div>',
    'inputContainerError' => '<div class="form-group has-error" {{required}}>{{content}}</div>{{error}}',
];
?>

这将覆盖您应用中的所有表单。