Internet Explorer issue with HTML5 form attribute for button element

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

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

IE does not support HTML5 form attribute for <input> or <button> element yet.

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 onsubmit event. When user submits the form, update the value inside.

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

(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='+ $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);

Live version: http://jsfiddle.net/hbxk4e61/

By the way, you can check this page to test how many HTML5 features your browser currently supports. For example, I'm using Chrome 31 and it does support this attribute.

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

document.getElementById("myForm").submit();

or jQuery

$("#myForm").submit();

<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>

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