将自定义 HTML 属性添加到 Grav 生成表单的按钮

Posted

技术标签:

【中文标题】将自定义 HTML 属性添加到 Grav 生成表单的按钮【英文标题】:Add custom HTML attribute to buttons of a Grav generated form 【发布时间】:2021-05-09 13:07:55 【问题描述】:

我创建了一个带有以下页脚的 Bootstrap 表单:

            <div class="modal-footer">
                <button type="button" 
                        class="btn btn-secondary" 
                        data-bs-dismiss="modal" // <----------------------
                  >Close
                </button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>

在 Grav 中,我创建了一个样式类似于我的 Bootstrap 表单的表单。我使用了official documentation。要关闭模式和表单,我需要将自定义属性data-bs-dismiss="modal" 添加到 Grav 生成的按钮中:

    buttons:
        -
            type: reset
            value: Cancel
            classes: btn btn-secondary mx-3
            attributes: data-bs-dismiss="modal"   <-------- add custom attribute how?
        -
            type: submit
            value: 
            classes: btn btn-primary
    process: ...

我的示例代码不起作用。

如何在表单 frontmatter 中添加自定义属性,以便 Grav 使用按钮生成?

没有文档说明 Grav 表单插件接受哪些附加属性或值,所以我不知所措。只需单击屏幕上的任意位置即可,但我不能指望所有不懂技术的用户都知道这一点,所以我还需要一个按钮。

【问题讨论】:

How to Create a Custom Form Field in Gravity Forms 和gform_add_field_buttons @AlivetoDie Grav CMS 中是否使用了重力形式?文档中对此一无所知。 Gravity 和 Grav 是两个不同的 CMS 【参考方案1】:

您可以尝试以下方法。

buttons:
  submit:
    type: submit
    value: Submit
    classes: btn btn-secondary
    attributes:
      data-bs-dismiss: modal

  reset:
    type: reset
    value: Reset

生成的元素:

<button type="submit" data-bs-dismiss="modal" class="btn btn btn-secondary">Submit</button>

注意:

我没有使用 Bootstrap 测试过它 不确定使用“属性”是否有任何副作用,但它似乎有效。

【讨论】:

以上是关于将自定义 HTML 属性添加到 Grav 生成表单的按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何将自定义 CSS 添加到清晰的表单中?

将自定义html添加到django中的choicefield标签

如何将自定义字段添加到 WooCommerce 注册表单

将自定义组件添加到反应式表单的 FormGroup 的正确方法是啥?

将自定义回调添加到 Codeigniter 表单验证

Django 将自定义表单错误添加到 form.errors