我使用这种方式，并喜欢它，它在提交之前验证表单也兼容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，即表单可以提交，但引导错误/验证我无法显示，我测试)。

一个对我很有效的解决方案，在这里仍然没有。它需要在<表单>中有一个视觉上隐藏的<submit>或<input type="submit">元素，并在其外部有一个相关的<label>元素。它看起来是这样的:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

现在，该链接允许您通过单击<label>元素来“单击”表单<submit>元素。

试试这个:

<input type="submit" onclick="document.forms[0].submit();" />

尽管我建议在表单中添加一个id，并通过它来访问，而不是document.forms[index]。

我有一个问题，我试图从表格单元格元素隐藏表单，但仍然显示表单提交按钮。 问题是表单元素仍然占用了额外的空白空间，使得表格单元格的格式看起来很奇怪。 display:none和visibility:hidden属性不起作用，因为它也会隐藏提交按钮，因为它包含在我试图隐藏的表单中。 简单的答案是使用CSS将表单高度设置为几乎为零

So,

CSS—

    #formID {height:4px;}

为我工作。

类似于这里的另一个解决方案，只是稍加修改:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp