blocks|key|2350756|text|IE还不支持HTML5+form属性用于<input>或<button>元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2350757|如果要将外部输入元素与表单关联，可以将“阴影”复制为窗体内的不可见输入字段，并将事件处理程序附加到窗体的onsubmit事件。当用户提交表单时，更新其中的值。|2350758|下面的多边形填充(需要jQuery)模拟此特性。它使带有form属性的输入元素表现为表单中的元素：|2350759|(function($)+{
++/**
+++*+polyfill+for+html5+form+attr
+++*/

++//+detect+if+browser+supports+this
++var+sampleElement+=+$('[form]').get(0);
++var+isIE11+=+!(window.ActiveXObject)+&&+"ActiveXObject"+in+window;
++if+(sampleElement+&&+window.HTMLFormElement+&&+sampleElement.form+instanceof+HTMLFormElement+&&+!isIE11)+{
++++//+browser+supports+it,+no+need+to+fix
++++return;
++}

++/**
+++*+Append+a+field+to+a+form
+++*
+++*/
++$.fn.appendField+=+function(data)+{
++++//+for+form+only
++++if+(!this.is('form'))+return;

++++//+wrap+data
++++if+(!$.isArray(data)+&&+data.name+&&+data.value)+{
++++++data+=+[data];
++++}

++++var+$form+=+this;

++++//+attach+new+params
++++$.each(data,+function(i,+item)+{
++++++$('<input/>')
++++++++.attr('type',+'hidden')
++++++++.attr('name',+item.name)
++++++++.val(item.value).appendTo($form);
++++});

++++return+$form;
++};

++/**
+++*+Find+all+input+fields+with+form+attribute+point+to+jQuery+object
+++*+
+++*/
++$('form[id]').submit(function(e)+{
++++var+$form+=+$(this);
++++//+serialize+data
++++var+data+=+$('[form='%2B+$form.attr('id')+%2B+']').serializeArray();
++++//+append+data+to+form
++++$form.appendField(data);
++}).each(function()+{
++++var+form+=+this,
++++++$form+=+$(form),
++++++$fields+=+$('[form='+%2B+$form.attr('id')+%2B+']');

++++$fields.filter('button,+input').filter('[type=reset],[type=submit]').click(function()+{
++++++var+type+=+this.type.toLowerCase();
++++++if+(type+===+'reset')+{
++++++++//+reset+form
++++++++form.reset();
++++++++//+for+elements+outside+form
++++++++$fields.each(function()+{
++++++++++this.value+=+this.defaultValue;
++++++++++this.checked+=+this.defaultChecked;
++++++++}).filter('select').each(function()+{
++++++++++$(this).find('option').each(function()+{
++++++++++++this.selected+=+this.defaultSelected;
++++++++++});
++++++++});
++++++}+else+if+(type.match(/%5Esubmit%7Cimage$/i))+{
++++++++$(form).appendField({name:+this.name,+value:+this.value}).submit();
++++++}
++++});
++});


})(jQuery);|code-block|syntax|javascript|2350760|直播版本：http://jsfiddle.net/hbxk4e61/|2350761|顺便说一句，您可以检查此页来测试浏览器当前支持多少HTML5功能。例如，我使用的是Chrome+31，它确实支持这个属性。|2350762|​|2350763|📷|atomic|2350764|2350765|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hbxk4e61/|1|http://html5test.com/|2|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/0a406c701cca3f2c39a988d508f44a5b.png|imageAlt^0|C|4|K|7|S|8|0|1G|8|0|S|4|0|0|5|T|0|0|B|2|1|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1R|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|Q|3|R|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|S|3|T|5|6|7|20|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|X|3|T|5|6|7|25|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|19|12|1A|E|$1B|1C|1D|-4]]]]

<p>IE does not support HTML5 <code>form</code> attribute for <code>&lt;input&gt;</code> or <code>&lt;button&gt;</code> element yet.</p>

<p>If you want to associate an outer input element with the form, you can duplicate a "shadow" as an invisible input field inside your form, and attach an event handler to the form's <code>onsubmit</code> event. When user submits the form, update the value inside.</p>

<p>The following polyfill (requires jQuery) emulates the feature. It makes the input elements with <code>form</code> attribute act like they are inside the form:</p>

<pre><code>(function($) {
  /**
   * polyfill for html5 form attr
   */

  // detect if browser supports this
  var sampleElement = $('[form]').get(0);
  var isIE11 = !(window.ActiveXObject) &amp;&amp; "ActiveXObject" in window;
  if (sampleElement &amp;&amp; window.HTMLFormElement &amp;&amp; sampleElement.form instanceof HTMLFormElement &amp;&amp; !isIE11) {
    // browser supports it, no need to fix
    return;
  }

  /**
   * Append a field to a form
   *
   */
  $.fn.appendField = function(data) {
    // for form only
    if (!this.is('form')) return;

    // wrap data
    if (!$.isArray(data) &amp;&amp; data.name &amp;&amp; data.value) {
      data = [data];
    }

    var $form = this;

    // attach new params
    $.each(data, function(i, item) {
      $('&lt;input/&gt;')
        .attr('type', 'hidden')
        .attr('name', item.name)
        .val(item.value).appendTo($form);
    });

    return $form;
  };

  /**
   * Find all input fields with form attribute point to jQuery object
   * 
   */
  $('form[id]').submit(function(e) {
    var $form = $(this);
    // serialize data
    var data = $('[form='+ $form.attr('id') + ']').serializeArray();
    // append data to form
    $form.appendField(data);
  }).each(function() {
    var form = this,
      $form = $(form),
      $fields = $('[form=' + $form.attr('id') + ']');

    $fields.filter('button, input').filter('[type=reset],[type=submit]').click(function() {
      var type = this.type.toLowerCase();
      if (type === 'reset') {
        // reset form
        form.reset();
        // for elements outside form
        $fields.each(function() {
          this.value = this.defaultValue;
          this.checked = this.defaultChecked;
        }).filter('select').each(function() {
          $(this).find('option').each(function() {
            this.selected = this.defaultSelected;
          });
        });
      } else if (type.match(/^submit|image$/i)) {
        $(form).appendField({name: this.name, value: this.value}).submit();
      }
    });
  });


})(jQuery);
</code></pre>

<p>Live version: <a href="http://jsfiddle.net/hbxk4e61/" rel="noreferrer">http://jsfiddle.net/hbxk4e61/</a></p>

<p>By the way, you can check <a href="http://html5test.com/" rel="noreferrer">this page</a> to test how many HTML5 features your browser currently supports. For example, I'm using Chrome 31 and it does support this attribute.</p>

<p><img src="https://i.stack.imgur.com/WMuK5.png" alt="Chrome currently supports the feature"></p>


blocks|key|2350804|text|据我所知，Internet+(至少到IE10+)不支持form属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2350805|您可以在javascript中填充此内容，也可以将input移动到相应的表单中。不过，其他地方已经回答了这个问题：https://stackoverflow.com/a/16694990/13019|2350806|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/16694990/13019^0|R|4|0|P|5|1L|16|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>As far as I can tell, Internet Explorer does not (up to IE10, at least) support the <code>form</code> attribute. </p>

<p>You can either polyfill this in javascript, or move the <code>input</code> to sit inside the relevant form. This has already been answered elsewhere though: <a href="https://stackoverflow.com/a/16694990/13019">https://stackoverflow.com/a/16694990/13019</a></p>


blocks|key|755077|text|嗯，IE在输入中基本上不支持form属性，但是您可以使用javascript来提交表单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755078|document.getElementById("myForm").submit();|code-block|syntax|javascript|755079|或jQuery|755080|$("#myForm").submit();|755081|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Well, IE basically does not support form attribute in input, but you could use javascript to submit your form: </p>

<pre><code>document.getElementById("myForm").submit();
</code></pre>

<p>or jQuery</p>

<pre><code>$("#myForm").submit();
</code></pre>


blocks|key|754089|text|<form+id="form-any-name">
+++<input+type="button"+value="Submit"+class="myButton"+/>
</form>
<button+type="submit">Submit</button>

<script+type="text/javascript">
++++$(document).ready(function()+{
++++++++$('button[type=\'submit\']').on('click',+function()+{
++++++++++++$("form[id*='form-']").submit();
++++++++});
++++});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|754090|由于所有项目都包含了jquery+100%25+:)，所以可以在外部或任何包含的js文件中定义函数，以捕获以form开头的所有表单id，从而捕获所有的表单id，从而捕获具有不同名称的不同页面上的窗体，从而不必重复相同的jquery代码片段。|unstyled|754091|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;form id="form-any-name"&gt;
   &lt;input type="button" value="Submit" class="myButton" /&gt;
&lt;/form&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $('button[type=\'submit\']').on('click', function() {
            $("form[id*='form-']").submit();
        });
    });
&lt;/script&gt;
</code></pre>

<p>Since all projects has included jquery 100%  :) you can define in external or any included js file the on document ready function  to catch the submit button clicked outsiie form by catching all forms  id starting with form-   so it catch forms on different page with different names so you do not have to repeat the very same jquery code snipet</p>


blocks|key|179344|text|在@Voldemarasškys的回答中，我改进了他的脚本，使其作为一个多边形填充，这样您仍然可以拥有form属性no按钮，并且它的工作方式就好像EDGE/IE会尊重form属性一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|179345|<form+id="form-any-name">
+++<input+type="button"+value="Submit"+class="myButton"+/>
</form>
<button+type="submit"+form="form-any-name">Submit</button>

<script+type="text/javascript">
$(document).ready(function()+{
++++$('button[type=\'submit\']').click(function+(e)+{
++++++++var+formId+=+$(e.target).attr("form");
++++++++$("form[id*="%2BformId%2B"]").submit();
++++});
});
</script>|code-block|syntax|javascript|179346|主要的区别是，现在我们在外部form按钮上包含了submit。此外，在click处理程序中，我只使用事件来获取target元素，并从id中发现目标表单的id。|179347|:)|179348|entityMap^0|1F|4|2B|4|0|0|E|4|O|6|Z|5|1J|6|24|2|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|P|$]]

<p>From @Voldemaras Birškys' answer, I've improved his script to work as a polyfill so you can still have the <code>form</code> attribute no your button and it will work as if EDGE/IE would respect the <code>form</code> attribute.</p>

<pre><code>&lt;form id="form-any-name"&gt;
   &lt;input type="button" value="Submit" class="myButton" /&gt;
&lt;/form&gt;
&lt;button type="submit" form="form-any-name"&gt;Submit&lt;/button&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $('button[type=\'submit\']').click(function (e) {
        var formId = $(e.target).attr("form");
        $("form[id*="+formId+"]").submit();
    });
});
&lt;/script&gt;
</code></pre>

<p>The main difference is that now we include <code>form</code> on the external <code>submit</code> button.
Also, inside the <code>click</code> handler I just use the event to get the <code>target</code> element and from id discover the <code>id</code> of the target form.</p>

<p>:)</p>


blocks|key|755136|text|如果通过ajax发送表单并使用vanilla+js，则可以添加具有"+form“属性的输入，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755137|function+sendViaAjax(event,+callback)+{
++++event.preventDefault();
++++var+form+=+event.target;
++++var+formId+=+form.id;
++++var+url+=+form.getAttribute('action');
++++var+method+=+form.getAttribute('method');
++++var+data+=+new+FormData(form);
++++if(isInternetExplorer()+&&+formId)+{
++++++++var+formInputs+=+document.querySelectorAll('input[form="'%2BformId%2B'"],+textarea[form="'%2BformId%2B'"],+select[form="'%2BformId%2B'"]');
++++++++[].forEach.call(formInputs,+function+(el)+{
++++++++++++var+inputName+=+el.getAttribute('name');
++++++++++++data.append(inputName,+el.value);
++++++++});
++++}
++++var+xhr+=+new+XMLHttpRequest();
++++xhr.open(method,+url);
++++xhr.onload+=+function+()+{
++++++++//+something
++++};
++++xhr.onerror+=+function+()+{
+++++++//+something
++++};
++++xhr.send(data);
}

function+isInternetExplorer()+{
++++return+(navigator.appName+==+'Microsoft+Internet+Explorer'+%7C%7C
++++++++!!(navigator.userAgent.match(/Trident/)+%7C%7C
++++++++++++navigator.userAgent.match(/rv:11/))+%7C%7C
++++++++(typeof+$.browser+!==+"undefined"+&&+$.browser.msie+==+1));
}|code-block|syntax|javascript|755138|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you send form via ajax and use vanilla js, you can add inputs with "form" attribute like below:</p>

<pre><code>function sendViaAjax(event, callback) {
    event.preventDefault();
    var form = event.target;
    var formId = form.id;
    var url = form.getAttribute('action');
    var method = form.getAttribute('method');
    var data = new FormData(form);
    if(isInternetExplorer() &amp;&amp; formId) {
        var formInputs = document.querySelectorAll('input[form="'+formId+'"], textarea[form="'+formId+'"], select[form="'+formId+'"]');
        [].forEach.call(formInputs, function (el) {
            var inputName = el.getAttribute('name');
            data.append(inputName, el.value);
        });
    }
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
        // something
    };
    xhr.onerror = function () {
       // something
    };
    xhr.send(data);
}

function isInternetExplorer() {
    return (navigator.appName == 'Microsoft Internet Explorer' ||
        !!(navigator.userAgent.match(/Trident/) ||
            navigator.userAgent.match(/rv:11/)) ||
        (typeof $.browser !== "undefined" &amp;&amp; $.browser.msie == 1));
}
</code></pre>


<p>in HTML5, there is the form attribute. Basically</p>

<pre><code>&lt;form id="myform" method="get" action="something.jsp"&gt;
    &lt;input type="text" name="name" /&gt;
&lt;/form&gt;
&lt;input type="submit" form="myform" /&gt;
</code></pre>

<p>the above code is not working in IE.
Can any one help me how to solve this requirement.</p>

<p>I've used the following javascript and jQuery to submit the form, but I facing the Ajax issue.
where my page is reloading. </p>

<pre><code>document.getElementById("myForm").submit();

$("#myForm").submit();
</code></pre>

<p>How can I submit my form where my page should not load.
I am using Anguler JS Ajax.</p>


Internet Explorer issue with HTML5 form attribute for button element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在HTML5中，有一个form属性。基本上<form id="myform" method="get" action="something.jsp">    <input type="text" name="name" /></form><input type="submit" form="myform" />以上代码...

问Internet发出按钮元素的HTML5窗体属性
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Internet发出按钮元素的HTML5窗体属性EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Internet发出按钮元素的HTML5窗体属性
EN