<button> vs <input type="button" />

Differences

  1. <button> can contain HTML. <input type="button" /> on the other hand is an empty element (such as br, hr, image), therefore it cannot contain content.
  2. <button> supports pseudo-elements such as :after and :before which is very useful to style the button. Whereas <input type="button" /> doesn't.
  3. By default, <button> has the default attribute type="submit". It means that if the type attribute isn't specified, clicking the button will submit its enclosing form.
    If you want the input to behave as a submit button, we have to change the type attribute to submit.

Good practices

  1. The button element is more semantic than the input with type of button. It's recommended to use the button element if you want to create a clickable button.
  2. Always specific the type attribute for the button element. The possible values are
ValueDescription
submitThe button submits the form data to the server
resetResets form inputs to initial values
buttonBy default, it does nothing when pressed
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved