Button and Input tags in HTML5

In HTML5, there are two tags that produce visually similar results. They are the button tag and the input tag with the type attribute set to a certain value - button, submit or reset.

Here are examples.

For the input tag, the type attribute is required if the tag is to be rendered as a button.

<input type="button" value="Example"/>

For the button tag, the type attribute is not required for it to render as a button. A value of submit is the default.

<button>Example</button>

Their use cases tend to overlap, but these are distinct tags and there are scenarios when one is more suitable than the other. First, let's take a look at all the possible values for the type attribute, which can apply to the button tag as well.

button - self explanatory. This will cause the input tag to appear as a button, but do nothing for the button tag.
submit - if the button or input tag is inside a form, clicking it will cause the form to submit.
reset - if the button or input tag is inside a form, clicking it will cause the form to reset.

And finally, we have the value image. This is only applicable for input tags, and the src attribute is required as well. The resultant button will have an image and act as a Submit button.

For this, we will use the image below.

1_0.jpg

<input type="image" src="http://www.teochewthunder.com/posts/2022/8/1_0.jpg"/>

For button tags, HTML is allowed between the opening and closing tags, so we could do this.

<button><img src="http://www.teochewthunder.com/posts/2022/8/1_0.jpg"></button>

Which is better?

As always, that really depends on context. In most contexts, the functionality of the input and button tags are interchangeable.

However, again, in most contexts, the button tag is semantically more obvious. And since we don't have to bother with Internet Explorer any more (the button tag had an issue there) we can just use the button tag for most cases. Also, remember that it is possible to embed HTML within the button tag. This makes it infinitely more useful from a design perspective. Sure, we could apply CSS on the input tag the same way as a button tag, but why complicate matters?

One use case for the input tag does stand out, though. Consider this code. In here, we dynamically change the type of the input tag upon clicking, which would not be possible for the button tag.

<input type="button" value="Click me for a magic trick!" onclick="this.type = (this.type == 'button' ? 'checkbox' : 'button')" />

Click on it, see what happens!

Cool parlor trick, eh? Unfortunately, that is also a very niche case... and quite frankly, plainly ridiculous.

Conclusion

The button tag is coolness exemplified, and with the advent of HTML5, on firm ground. There are still uses for the input tag, though perhaps not as a button anymore.

On to more pressing issues!
T___T