Difference between HTML forms submit tags

Question

Hello, as far as I know there are three methods to submit an HTML form without JS or keyboard:

1. input type=submit
2. button tag
3. input type=image

Is there another way to create an element submitting the form on being pressed? Is it correct to handle button tag (type=submit) same as input type=submit (I mean, if we discard the fact button can contain inner html, we can simply replace button with input type="submit" and the form will be sent correctly)? Is adding name.x and name.y the only difference when using input type=image?

Answer 1

1. Not that I know of, those should be the only pure html ways to submit the form other than directly invoking the submit method which is internal Javascript, but that is what the submit button does anyway.
2. The button element has issues in Internet Explorer regarding which value it passes, I do not recommend the use of it.
3. Yes, they're pretty much the same
4. As far as I know input type=image is exactly the same except that it sends those extra coordinate parameters which you can ignore on the server-side.

Answer 2

1. With JavaScript, you can call the form's submit method. However, this should be avoided as it will not work if the user has JavaScript disabled.

2. No, because a button tag can be given a value separate from the text displayed on the button, not to mention the <button> tag's ability to inline HTML. (For example <button type="submit"><img src="submit.png" alt="Submit"></button>).

3. Yes, the main feature of <input type="image"> is the addition of the x and y coordinates.

Answer 3

You can use JavaScript to simulate it. I'd take an <input type="submit"> and replace it with the element that you'd like to submit a form with, so it's still accessible for users without JavaScript.

<input type="submit" id="submit-button" value="submit" />

Then in JavaScript (using jQuery in this example):

$('#submit-button').remove().after('<a href="#" id="submit-link">Submit form</a>');
$('#submit-link').click( function(event){
     event.preventDefault();
     $('#submit-link').closest('form').submit();
});