Question

我正在努力使用Yii2的ActiveForm来创建所需的特定HTML / CSS样式。下面的HTML代码（应用了CSS）创建了一个表单字段，其中带有图标 inside 和提交按钮 inside 。

<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（）放在所在的位置，但是图标和Submit按钮最终不在它的外面。现在，我已经尝试使用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元素（例如，

Answer 1

您可以使用活动字段的parts属性和templete属性来配置输入的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}"
  ],
]);

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

1 个答案: