HTML5 Buttons Outside Forms
There have been a few places in our applications where it has been necessary to place our submit buttons outside of a form tag. Rather than use CSS to position the button or adding a JavaScript click handler to fire the submit request I opted to use the HTML5 form attribute to attach my button to the form:
The form attribute provides a clean way to link our button to the form, but unfortunately this method failed while testing in Internet Explorer. This is a case where Internet Explorer has failed to conform to the HTML5 standard.
After some searching we decided on the solution presented here. The label for attribute is supported in Internet Explorer and Microsoft Edge and works when placed outside of a form tag. By placing a hidden submit button inside the form and applying button styling to a label outside of the form we get the desired result.
<form id="my-form"></form>
<button form="my-form" class="btn btn-primary">Submit</button>
The form attribute provides a clean way to link our button to the form, but unfortunately this method failed while testing in Internet Explorer. This is a case where Internet Explorer has failed to conform to the HTML5 standard.
After some searching we decided on the solution presented here. The label for attribute is supported in Internet Explorer and Microsoft Edge and works when placed outside of a form tag. By placing a hidden submit button inside the form and applying button styling to a label outside of the form we get the desired result.
<form id="my-form">
<button id="submit-button" style="display:none;"></button>
</form>
<label class="btn btn-primary" for="submit-button">Submit</label>
Comments
Post a Comment