Question

我的问题是为什么会这样：

<form id="aaa" action"xxx">
</form>
<button form="aaa" type="submit">Button</button>

在Firefox，Opera，Chrome中有效吗？在IE 11和Windows系统的移动设备上无效？上面的示例什么也没做，按钮似乎不属于表单。

提前谢谢你。

Answer 1

如前所述，按钮理想情况下应位于表单内。但是，使用表单外部的按钮进行操作的一种方法是让按钮通过JavaScript触发表单提交。

一个快速而又脏的jQuery示例来说明：

$('button[form="aaa"]').click(function()
{
    $('#aaa').submit();
});

如果愿意，您可以使用按钮元素上的in-line onclick =“”属性替换它。

Answer 2

submit按钮通常用于将表单中的数据提交到服务器（未考虑JavaScript）。由于示例中的按钮不是表单的一部分，因此没有要提交的关联数据。

编辑：注意到form属性后，用户JayC的回答是正确的。 Internet Explorer不支持按钮上的该属性，而其他浏览器则支持该属性。它是HTML 5标准的一部分，尚未实现。

Answer 3

这个问题很老但我想我会分享我是如何使用React应用程序的。我需要在提交onSubmit时运行form回调，而在表单上直接调用submit时则不会发生这种情况。这是我对问题的快速解决方案。它只考虑表单之外的按钮：

/**
 * Is the [form] attribute supported?
 */
const isSupported = (() => {
  const TEST_FORM_NAME = 'form-attribute-polyfill-test';
  const testForm = document.createElement('form');
  testForm.setAttribute('id', TEST_FORM_NAME);
  testForm.setAttribute('type', 'hidden');
  const testInput = document.createElement('input');
  testInput.setAttribute('type', 'hidden');
  testInput.setAttribute('form', TEST_FORM_NAME);
  testForm.appendChild(testInput);
  document.body.appendChild(testInput);
  document.body.appendChild(testForm);
  const sampleElementFound = testForm.elements.length === 1;
  document.body.removeChild(testInput);
  document.body.removeChild(testForm);
  return sampleElementFound;
})();

/**
 * If it's not, listen for clicks on buttons with a form attribute.
 * In order to submit the form and have all the callbacks run, we insert
 * a button, click it and then remove it to simulate a submission from
 * inside the form.
 */
if (!isSupported) {
  window.addEventListener('click', e => {
    const {target} = e;
    const formId = target.getAttribute('form');
    if (target.nodeName.toLowerCase() === 'button' && formId) {
      e.preventDefault();
      const form = document.getElementById(formId);
      const button = document.createElement('button');
      form.appendChild(button);
      button.click();
      form.removeChild(button);
    }
  });
}

带有表单属性的<button>在IE </button>上不起作用

3 个答案: