将ValidForm Builder与Twitter Bootstrap集成

Question

我已成功使用ValidFormBuilder创建一个安全的Web表单。为这个伟大的工具欢呼！ 现在我想在基于Twitter Bootstrap的网站中使用ValidForm。

我真的很喜欢它可以使用Twitter Bootstrap CSS设置ValidForm元素的样式。我可以想象这应该通过向ValidForm元素添加CSS类来完成。

如何做到这一点？

更具体地说：

1. 如何将role元素的<form> - 属性设置为form？
2. 如何将课程form-control添加到<input>元素？
3. 如何将课程btw和btn-default添加到<input type="submit">元素？

我想创建一个使用此处提到的Twitter Bootstrap Forms CSS的表单：http://getbootstrap.com/css/#forms

提前感谢您的帮助！

Answer 1

将班级btw和btn-default添加到按钮：

将自定义类添加到ValidFrom Builder按钮：

$objForm->addButton(
    "Button label",
    array(
        // Set for example a Twitter Bootstrap class on this button
        "fieldclass" => "btn btn-large"
    )
);

我直接从the documentation

得到了这个例子

将自定义属性添加到文本字段

$objForm->addField(
    "first-name",
    "First name",
    ValidForm::VFORM_STRING,
    array(),
    array(),
    array(
        // Prefixing meta keys with 'field' will make sure
        // this meta is applied in the <input> element instead
        // of it's wrapping <div>
        "fieldrole" => "example-role"
    )
);

这将输出：

<div class="vf__optional">
    <label for="first-name">First name</label>
    <input type="text" value="" name="first-name" id="first-name" class="vf__string vf__text" role="autocomplete">
</div>

如果要将自定义类添加到submit元素，则需要一些javascript。这将在即将发布的ValidForm Builder 4.0版本中解决。

将数据属性添加到表单元素

假设您在正确的命名空间等中：

$objForm = new ValidForm("formName", null, null, array("data" => array("role" => "cool-role")));

这应输出接近的内容：

<form ... data-role='cool-role'>