README

这是一个用于更轻松创建HTML表单的小插件。将HTML与PHP混合在一起很难阅读，这种方法的好处是如果需要可以将逻辑卸载到控制器中——这对于像选择字段这样的东西来说很方便，你可能想要遍历结构字段来填充选项列表。

安装

手动

要使用此插件，请将所有文件放置在 site/plugins/kirby3-forms。

Composer

composer require hashandsalt/kirby3-forms

商业使用

此插件是免费的，但如果你在商业项目中使用它，请考虑

• 捐款 🍻 或
• 使用此联盟链接购买Kirby许可证

使用

此插件包含一些函数，使创建表单元素、匹配标签和错误消息更加容易。

输入函数

接受HTML输入类型、名称、CSS ID、CSS类和所有其他所需HTML属性的数组。

<?= input($type, $name, $id, $class, $opt = []) ?>

工作示例

<?= input('email', 'emailAddress', 'email', 'input-class', ['pattern' => '.+@globex.com', 'size' => '30']) ?>

标签函数

接受标签文本、for属性和CSS类。

<?= label($txt, $for, $class) ?>

工作示例

<?= label('Enter Email Address:', 'emailAddress', 'label-class') ?>

文本区域函数

接受名称、for属性和CSS类。

<?= textarea('feedback', 'userFeedback', 'input-class', ['placeholder' => 'Enter your feedback message']) ?>

选择函数

生成HTML选择元素。

接受名称、CSS ID、CSS类、HTML属性数组、默认选择（可选）、默认选择选项（可选）。

<?= select($name, $id, $class, $opt = null, $list = null, $selected = true, $idx = '') ?>

基本使用

<?= select('colors', 'colorSelection', 'input-class', null, ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']) ?>

预选选项

<?= select('colors', 'colorSelection', 'input-class', null, ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'], true, 'blue') ?>

预选选项和额外的HTML属性

<?= select('colors', 'colorSelection', 'input-class', ['disabled' = true], ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'], true, 'blue') ?>

按钮

接受类型、名称、CSS ID、CSS类、文本字符串和HTML属性数组

<?= button($type, $name, $id, $class, $txt, $opt = null) ?>

工作示例

<?= button('button', 'send', 'sendMsg', 'btn', 'Disabled', ['value' => "Don't Click Me!", 'disabled' => true]) ?>

单选按钮和复选框

输入函数也可以用于单选按钮和复选框元素

<div class="form-input radios">

  <span>Marketing Options</span>

  <?= input('checkbox', 'consent', 'consent', 'consent', ['value' => 'granted']) ?>
  <?= label("Yes! Add me to the mailing list!", 'consent', 'label-class') ?>
</div>

<div class="form-input radios">

  <span>Choose Your Size:</span>

  <ul class="choices">
    <li>
      <?= input('radio', 'size', 'small', 'small', ['value' => 'Small']) ?>
      <?= label("Small", 'small', 'label-class') ?>
    </li>
    <li>
      <?= input('radio', 'size', 'medium', 'medium', ['value' => 'Medium']) ?>
      <?= label("Medium", 'medium', 'label-class') ?>
    </li>
    <li>
      <?= input('radio', 'size', 'large', 'large', ['value' => 'Large']) ?>
      <?= label("Large", 'large', 'label-class') ?>
    </li>
  </ul>
</div>

</div>

错误/成功消息

接受HTML标签、消息字符串和CSS类

<?= formMsg($tag, $msg, $class) ?>

工作示例

<?= formMsg('span', 'Please fill in this field', 'input error') ?>

代码片段

该插件包含一些代码片段，与上述函数相匹配，因此您可以直接使用或将其作为起点制作自己的代码。

<?= snippet('forms/input', ['type' => 'range', 'wrapclass' => 'form-input', 'label' => 'How many?', 'name' => 'many', 'id' => 'many', 'labelclass' => 'label-class', 'inputclass' => 'input-range', 'attr' => ['min' => '1', 'max' => '20']]) ?>

<?= snippet('forms/select', ['wrapclass' => 'form-input', 'label' => 'Colors', 'name' => 'colors', 'id' => 'colors', 'labelclass' => 'label-class', 'inputclass' => 'input-text', 'attr' => [], 'list' => ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']]) ?>

<?= snippet('forms/textarea', ['wrapclass' => 'form-input', 'label' => 'Feedback', 'name' => 'feedback', 'id' => 'feedback', 'labelclass' => 'label-class', 'inputclass' => 'input-text', 'attr' => ['placeholder' => 'Enter your name']]) ?>

<?= snippet('forms/formMsg', ['wrapclass' => 'error-box', 'tag' => 'p', 'msg' => 'Please fill out the field.', 'class' => 'error-txt']); ?>