时间戳

首页 > 解决方案 > 如何使用多个 HTML 类创建 Yii2 ActiveForm 字段

html - 如何使用多个 HTML 类创建 Yii2 ActiveForm 字段

问题描述

我正在努力使用 Yii2 的 ActiveForm 来创建我想要的特定 HTML/CSS 样式。下面的这段 HTML 代码（应用了 css）创建了一个表单字段，里面有图标，里面有提交按钮。

<form action="" class="form form--type">
            <i class="bpi bpi--icon"></i>
            <input type="email" class="field field--style-round" placeholder="Email address">
            <button type="submit" class="button button--style-default">
              Submit
            </button>
          </form>

开始和结束表单标签之间的所有内容都包含在表单中。我基本上需要为 Yii2 ActiveForm 创建一个包含所有 html 并正确显示的字段。

我尝试将 HTML 保留在适当的位置，并将 $form->field() 放在 < input type> 所在的位置，但图标和提交按钮最终位于它之外。现在，我尝试使用 textInput($options = []) 传递该样式，如下所示：

<?= $form->field($model, 'email')->textInput($options = 
         [
              'class' =>
                   ['form form--type-input-button-split', 'bpi bpi--email', 'field field--style-round'], 
              'placeholder' => 'Your email address',
              'button' =>
                   ['type' => 'submit', 'class' => 'button button--style-default']
         ])?>

但它没有像我需要的那样在字段内显示图标或提交按钮（按钮根本没有出现）。我确定我没有在该数组中设置按钮，但一般来说，如何在表单字段内创建一个包含几个特定 html 元素（如 <i>、<button>）的 Yii2 表单字段？

标签： htmlformsyii2active-form

解决方案

您可以使用活动字段的部件属性和模板属性来配置输入的html，例如：

$form->field($model, 'email', [
  'parts' => [
    '{icon}' => '<i class="bpi bpi--icon"></i>',
    '{button}' => '<button type="submit" class="button button--style-default">Submit</button>'
  ],
  'template' => "{label}\n{icon}{input}{button}\n{hint}\n{error}"
])->textInput($options[
  'class' => 'form form--type-input-button-split bpi bpi--email field field--style-round'], 
  'placeholder' => 'Your email address',
])?>

您还可以为表单的每个字段配置这些属性，例如：

$form = ActiveForm::begin([
  'id' => 'myform',
  'fieldConfig' => [
    'parts' => [
      '{icon}' => '<i class="bpi bpi--icon"></i>',
      '{button}' => '<button type="submit" class="button button--style-default">Submit</button>'
    ],
    'template' => "{label}\n{icon}{input}{button}\n{hint}\n{error}"
  ],
]);

推荐阅读