如何在不实际使用 <form> 的情况下使用引导表单布局？

Posted 2023-02-22

【中文标题】如何在不实际使用 <form> 的情况下使用引导表单布局？

【英文标题】：How to use bootstrap form layout without actually using <form>?

【发布时间】：2015-05-05 12:10:45

【问题描述】：

我们需要使用类似以下内容的格式和布局，但我们不想要传统的 html 表单（我们使用 ajax、javascript 来拉取/设置控件上的数据）。问题是当您点击“输入”时，页面假定您正在提交表单，可能是因为有表单标签（但没有提交按钮，所以它可能默认为其中一个按钮，但这是另一回事）：

<form role="form" class="form-horizontal">      
        <legend>Product Header Information</legend>
        <div class="form-group form-group-sm">
            <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
            <div class="col-xs-8 col-sm-4 col-md-4">
                    <input class="form-control" id="pid" />
            </div>
        </div>
.....
</form>

【问题讨论】：

使用表格。使用提交按钮。 Make it work。然后将你的 JS 绑定在上面（如果 Ajax 工作，则使用 submit 事件阻止正常的表单提交）。

你可以使用 .preventDefault() 来做这个

好吧，当您说“使用表单，使用提交”时，您肯定不是说我需要更改页面功能，以获得演示（引导布局）的好处，是吗？

【参考方案1】：

这是答案，只需将“form”替换为“div”，这在 Firefox、IE 和 Chrome 中似乎效果很好。确实有道理.. 我需要 css 类，我使用 css 类，谁在乎什么标签？

<div class="form-horizontal">      
        <legend>Product Header Information</legend>
        <div class="form-group form-group-sm">
            <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
            <div class="col-xs-8 col-sm-4 col-md-4">
                    <input class="form-control" id="pid" />
            </div>
        </div>
.....
</div>

【讨论】：

简单而出色的解决方案 - 谢谢！

【参考方案2】：

使用表单是正确的方法。为了防止表单在提交时刷新页面，您可以使用 jQuery：

("form").on("submit", function () /*your ajax*/ return false; );

【讨论】：

不一定，我不需要html“表单”（以及随之而来的所有刷新问题）我可以使用AJAX，点击按钮（不提交）可以调用XMLHttpRequest请求

【参考方案3】：

在 ajax 的世界里，form 标签几乎没有用处。它是 web 2.0 之前的遗留物。如果 div.form-horizo​​ntal 有效，请使用它。