通过在组件的定义中添加form="yourFormId"，可以告诉表单<form>标记之外的外部组件属于它。

在这种情况下，

<form id="login-form">
... blah...
</form>

<button type="submit" form="login-form" name="login_user" class="login-form-btn">
        <B>Log In</B>
</button>

．.． 仍然会愉快地提交表单，因为您为它分配了表单名称。表单认为按钮是它的一部分，即使按钮在标签之外，这需要没有javascript来提交表单(这可以是bug，即表单可以提交，但引导错误/验证我无法显示，我测试)。

我使用这种方式，并喜欢它，它在提交之前验证表单也兼容safari/谷歌。没有jquery n.n。

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>

通过在组件的定义中添加form="yourFormId"，可以告诉表单<form>标记之外的外部组件属于它。

在这种情况下，

<form id="login-form">
... blah...
</form>

<button type="submit" form="login-form" name="login_user" class="login-form-btn">
        <B>Log In</B>
</button>

．.． 仍然会愉快地提交表单，因为您为它分配了表单名称。表单认为按钮是它的一部分，即使按钮在标签之外，这需要没有javascript来提交表单(这可以是bug，即表单可以提交，但引导错误/验证我无法显示，我测试)。

你的<按钮>将需要有这2个属性:type="submit"和form="form_id"如果它在表单之外。例子:

<form id="my-form">
   ...
</form>

<button type="submit" form="my-form">
   Submit
</button>

此外，<button>元素还可以具有formmethod和formaction属性，分别覆盖表单的方法和动作。例子:

<button type="submit" form="my-form" formmethod="post" formaction="/something.php">
   Submit
</button>

下面是<button>元素所有可用属性的引用:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

在HTML5中，有form属性。基本上

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" value="Update"/>

更新:在现代浏览器中，您可以使用form属性来完成此操作。

据我所知，你不能没有javascript做到这一点。

这是说明书上说的

用于创建控件的元素通常出现在FORM内部 元素，但也可以出现在FORM元素声明之外 当它们被用于构建用户界面时。这在 内在事件部分。注意，窗体外部的控件不能这样做 成功控制。

这是我的粗体

提交按钮被认为是一个控件。

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

从评论中

我有一个多选项卡设置区域的按钮更新所有，到期 根据它的设计，按钮将在窗体之外。

为什么不把输入放在表单内部，而是使用CSS将其定位到页面的其他地方呢?