Using submit input or submit button in HTML forms

In this article you will learn when to use submit input or submit button in HTML forms on your pages and what is the best approach

Hey you programmer, how are you? Let’s learn more about HTML and its forms!

The big surprise is that from a functional point of view, there is no difference between both approaches.

That is, you can use both the input with the type of submit, and the button, so that the HTML pages and forms will receive your request in the same way.

It is worth mentioning that a button without the type attribute will present the submit behavior by default.

And then what’s the difference?

It’s in the styling possibilities!

In the input tag, we can’t add HTML to it as it already has a self-closing

Therefore, the content of all inputs will always be just text and even in the submit type, the input changes the value with the value attribute

On the button things are different, as we have the closing tag, we can add any HTML inside the button

Thus opening a much wider range of customization for us to work on

Let’s see both examples:

<div>
 <input type="submit" value="Submit">
</div>
<div>
 <button><span class="circle"></span>Submit</button>
</div>

And the CSS:

.circle {
 height: 20px;
 width: 20px;
 background-color: red;
 border-radius: 50%;
 display: inline-block;
 margin-right: 10px;
}

We styled a span inside the button, to represent what can be customized

View in browser:

Of course, this is a very simple example, but realize that the possibilities for manipulating new elements and CSS are endless.

Conclusion

In this article we learned how to use submit input or submit button in forms and also when to use them

We learned that the possibilities with the button are much greater and the use of both ends up being the same in terms of functionality

Want to learn more about HTML and CSS? Click here!