button vs input type button Which to use

Question

When looking at most sites  including SO   most of them use    lt input type  button    gt    instead of    lt button gt  lt  button gt     What are the main differences between the two  if any  Are there valid reasons to use one instead of the other  Are there valid reasons to use combine them  Does using  lt button gt  come with compatibility issues  seeing it is not very widely used

User · Answer

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

User · Answer

I just want to add something to the rest of the answers here  Input elements are considered empty or void elements  other empty elements are area   base   br   col   hr   img   input   link   meta   and param  You can also check here   meaning they cannot have any content  In addition to not having any content  empty elements cannot have any pseudo-elements like   after and   before  which I consider a major drawback

User · Answer

This article seems to offer a pretty good overview of the difference   From the page      Buttons created with the BUTTON element function just like buttons   created with the INPUT element  but   they offer richer rendering   possibilities  the BUTTON element may   have content  For example  a BUTTON   element that contains an image   functions like and may resemble an   INPUT element whose type is set to      image     but the BUTTON element type   allows content       The Button Element - W3C

User · Answer

Inside a  lt button gt  element you can put content  like text or images    lt button type  button  gt Click Me  lt  button gt     This is the difference between this element and buttons created with the  lt input gt  element

User · Answer

Here s a page describing the differences  basically you can put html into a  lt button gt  lt  button gt   And another page describing why people avoid  lt button gt  lt  button gt   Hint  IE6    Another IE problem when using  lt button   gt       And while we re talking about IE  it s   got a couple of bugs related to the   width of buttons  It ll mysteriously   add extra padding when you re trying   to add styles  meaning you have to add   a tiny hack to get things under   control

User · Answer

Just as a side note   lt button gt  will implicitly submit  which can cause problems if you want to use a button in a form without it submitting  Thus  another reason to use  lt input type  button  gt   or  lt button type  button  gt    Edit - more details  Without a type  button implicitly receives type of submit  It does not matter how many submit buttons or inputs there are in the form  any one of them which is explicitly or implicitly typed as submit  when clicked  will submit the form   There are 3 supported types for a button  submit      submits the form when clicked  default   reset       resets the fields in the form when clicked  button      clickable  but without any event handler until one is assigned

User · Answer

lt button gt     by default behaves like if it had a  type  submit  attribute   can be used without a form as well as in forms    text or html content allowed   css pseudo elements allowed  like  before    tag name is usually unique to a single form   vs    lt input type  button  gt     type should be set to  submit  to behave as a submitting element can only be used in forms  only text content allowed no css pseudo elements same tag name as most of the forms elements  inputs    -- in modern browsers  both elements are easily styleable with css but in most cases  button element is preferred as you can style more with inner html and pseudo elements

User · Answer

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

User · Answer

Quote     Important  If you use the button element in an HTML form  different browsers will submit different values  Internet Explorer will submit the text between the  lt button gt  and  lt  button gt  tags  while other browsers will submit the content of the value attribute  Use the input element to create buttons in an HTML form    From   http   www w3schools com tags tag button asp  If I understand correctly  the answer is compatibility and input consistency from browser to browser

User · Answer

Just as a side note   lt button gt  will implicitly submit  which can cause problems if you want to use a button in a form without it submitting  Thus  another reason to use  lt input type  button  gt   or  lt button type  button  gt    Edit - more details  Without a type  button implicitly receives type of submit  It does not matter how many submit buttons or inputs there are in the form  any one of them which is explicitly or implicitly typed as submit  when clicked  will submit the form   There are 3 supported types for a button  submit      submits the form when clicked  default   reset       resets the fields in the form when clicked  button      clickable  but without any event handler until one is assigned

User · Answer

Here s a page describing the differences  basically you can put html into a  lt button gt  lt  button gt   And another page describing why people avoid  lt button gt  lt  button gt   Hint  IE6    Another IE problem when using  lt button   gt       And while we re talking about IE  it s   got a couple of bugs related to the   width of buttons  It ll mysteriously   add extra padding when you re trying   to add styles  meaning you have to add   a tiny hack to get things under   control

User · Answer

Although this is a very old question and might not be relevant anymore  please keep in mind that most of the problems that the  lt button gt  tag used to have don t exist anymore and therefore is highly advisable to use it   In case you cannot do so for various reasons  just keep in mind to add the attribute role    button    in your tag as of accessibility  This article is quite informative  https   www deque com blog accessible-aria-buttons

User · Answer

Here s a page describing the differences  basically you can put html into a  lt button gt  lt  button gt   And another page describing why people avoid  lt button gt  lt  button gt   Hint  IE6    Another IE problem when using  lt button   gt       And while we re talking about IE  it s   got a couple of bugs related to the   width of buttons  It ll mysteriously   add extra padding when you re trying   to add styles  meaning you have to add   a tiny hack to get things under   control

User · Answer

I will quote the article The Difference Between Anchors  Inputs and Buttons   Anchors  the  lt a gt  element  represent hyperlinks  resources a person can navigate to or download in a browser  If you want to allow your user to move to a new page or download a file  then use an anchor   An input   lt input gt   represents a data field  so some user data you mean to send to server  There are several input types related to buttons     lt input type  submit  gt   lt input type  image  gt   lt input type  file  gt   lt input type  reset  gt   lt input type  button  gt    Each of them has a meaning  for example  file  is used to upload a file   reset  clears a form  and  submit  sends the data to the server  Check W3 reference on MDN or on W3Schools   The button   lt button gt   element is quite versatile    you can nest elements within a button  such as images  paragraphs  or headers  buttons can also contain   before and   after pseudo-elements  buttons support the disabled attribute  This makes it easy to turn them on and off    Again  check W3 reference for  lt button gt  tag on MDN or on W3Schools

User · Answer

Here s a page describing the differences  basically you can put html into a  lt button gt  lt  button gt   And another page describing why people avoid  lt button gt  lt  button gt   Hint  IE6    Another IE problem when using  lt button   gt       And while we re talking about IE  it s   got a couple of bugs related to the   width of buttons  It ll mysteriously   add extra padding when you re trying   to add styles  meaning you have to add   a tiny hack to get things under   control

User · Answer

This article seems to offer a pretty good overview of the difference   From the page      Buttons created with the BUTTON element function just like buttons   created with the INPUT element  but   they offer richer rendering   possibilities  the BUTTON element may   have content  For example  a BUTTON   element that contains an image   functions like and may resemble an   INPUT element whose type is set to      image     but the BUTTON element type   allows content       The Button Element - W3C

User · Answer

Quote     Important  If you use the button element in an HTML form  different browsers will submit different values  Internet Explorer will submit the text between the  lt button gt  and  lt  button gt  tags  while other browsers will submit the content of the value attribute  Use the input element to create buttons in an HTML form    From   http   www w3schools com tags tag button asp  If I understand correctly  the answer is compatibility and input consistency from browser to browser

User · Answer

There is a big difference if you are using jQuery  jQuery is aware of more events on inputs than it does on buttons  On buttons  jQuery is only aware of  click  events  On inputs  jQuery is aware of  click    focus   and  blur  events   You could always bind events to your buttons as needed  but just be aware that the events that jQuery automatically is aware of are different  For example  if you created a function that was executed whenever there was a  focusin  event on your page  an input would trigger the function but a button would not

User · Answer

There is a big difference if you are using jQuery  jQuery is aware of more events on inputs than it does on buttons  On buttons  jQuery is only aware of  click  events  On inputs  jQuery is aware of  click    focus   and  blur  events   You could always bind events to your buttons as needed  but just be aware that the events that jQuery automatically is aware of are different  For example  if you created a function that was executed whenever there was a  focusin  event on your page  an input would trigger the function but a button would not

User · Answer

Quote     Important  If you use the button element in an HTML form  different browsers will submit different values  Internet Explorer will submit the text between the  lt button gt  and  lt  button gt  tags  while other browsers will submit the content of the value attribute  Use the input element to create buttons in an HTML form    From   http   www w3schools com tags tag button asp  If I understand correctly  the answer is compatibility and input consistency from browser to browser

User · Answer

I will quote the article The Difference Between Anchors  Inputs and Buttons   Anchors  the  lt a gt  element  represent hyperlinks  resources a person can navigate to or download in a browser  If you want to allow your user to move to a new page or download a file  then use an anchor   An input   lt input gt   represents a data field  so some user data you mean to send to server  There are several input types related to buttons     lt input type  submit  gt   lt input type  image  gt   lt input type  file  gt   lt input type  reset  gt   lt input type  button  gt    Each of them has a meaning  for example  file  is used to upload a file   reset  clears a form  and  submit  sends the data to the server  Check W3 reference on MDN or on W3Schools   The button   lt button gt   element is quite versatile    you can nest elements within a button  such as images  paragraphs  or headers  buttons can also contain   before and   after pseudo-elements  buttons support the disabled attribute  This makes it easy to turn them on and off    Again  check W3 reference for  lt button gt  tag on MDN or on W3Schools

User · Answer

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

User · Answer

This article seems to offer a pretty good overview of the difference   From the page      Buttons created with the BUTTON element function just like buttons   created with the INPUT element  but   they offer richer rendering   possibilities  the BUTTON element may   have content  For example  a BUTTON   element that contains an image   functions like and may resemble an   INPUT element whose type is set to      image     but the BUTTON element type   allows content       The Button Element - W3C

User · Answer

lt button gt  is flexible in that it can contain HTML  Moreover  it is much easier to style using CSS  and the styling actually gets applied across all browsers  However  there are some drawbacks regarding Internet Explorer  Eww  IE    Internet Explorer does not detect the value attribute properly  using the tag s content as the value  All of the values in a form are sent to the server-side  regardless of whether or not the button is clicked  This makes using it as a  lt button type  submit  gt  tricky and a pain    lt input type  submit  gt  on the other hand doesn t have any value or detection issues  but you can t  however  add HTML like you can with  lt button gt   It s also harder to style  and the styling doesn t always respond well across all browsers  Hope this helped

User · Answer

Although this is a very old question and might not be relevant anymore  please keep in mind that most of the problems that the  lt button gt  tag used to have don t exist anymore and therefore is highly advisable to use it   In case you cannot do so for various reasons  just keep in mind to add the attribute role    button    in your tag as of accessibility  This article is quite informative  https   www deque com blog accessible-aria-buttons

User · Answer

Inside a  lt button gt  element you can put content  like text or images    lt button type  button  gt Click Me  lt  button gt     This is the difference between this element and buttons created with the  lt input gt  element

User · Answer

As far as CSS styling is concerned the  lt button type  submit  class  Btn  gt Example lt  button gt  is better as it gives you the ability to use CSS  before and  after pseudo classes which can help   Due to the  lt input type  button  gt  visually rendering different to an  lt a gt  or  lt span gt  when styled with classes in certain situations I avoid them   It s very worth noting the current top answer was written in 2009  IE6 isn t a concern now days so  lt button type  submit  gt Wins lt  button gt  styling consistency in my eyes comes out on top

User · Answer

Quote     Important  If you use the button element in an HTML form  different browsers will submit different values  Internet Explorer will submit the text between the  lt button gt  and  lt  button gt  tags  while other browsers will submit the content of the value attribute  Use the input element to create buttons in an HTML form    From   http   www w3schools com tags tag button asp  If I understand correctly  the answer is compatibility and input consistency from browser to browser

User · Answer

lt button gt  is flexible in that it can contain HTML  Moreover  it is much easier to style using CSS  and the styling actually gets applied across all browsers  However  there are some drawbacks regarding Internet Explorer  Eww  IE    Internet Explorer does not detect the value attribute properly  using the tag s content as the value  All of the values in a form are sent to the server-side  regardless of whether or not the button is clicked  This makes using it as a  lt button type  submit  gt  tricky and a pain    lt input type  submit  gt  on the other hand doesn t have any value or detection issues  but you can t  however  add HTML like you can with  lt button gt   It s also harder to style  and the styling doesn t always respond well across all browsers  Hope this helped

User · Answer

in addition  one of the differences can come from provider of the library  and what they code  for example here i m using cordova platform in combination with mobile angular ui  and while input div etc tags work well with ng-click  the button can cause Visual Studio debugger to crash  surely by differences  that the programmer caused  note that MattC answer point to the same issue  the jQuery is just a lib  and the provider didn t think of some functionality on one element  that s he provides on another  so when you are using a library  you may face an issue with one element  which you won t face with another  and simply the popular one like input  will mostly be the fixed one  just because it s more popular

User · Answer

in addition  one of the differences can come from provider of the library  and what they code  for example here i m using cordova platform in combination with mobile angular ui  and while input div etc tags work well with ng-click  the button can cause Visual Studio debugger to crash  surely by differences  that the programmer caused  note that MattC answer point to the same issue  the jQuery is just a lib  and the provider didn t think of some functionality on one element  that s he provides on another  so when you are using a library  you may face an issue with one element  which you won t face with another  and simply the popular one like input  will mostly be the fixed one  just because it s more popular

User · Answer

Use button from input element if you want to create button in a form  And use button tag if you want to create button for an action

User · Answer

Use button from input element if you want to create button in a form  And use button tag if you want to create button for an action

User · Answer

lt button gt     by default behaves like if it had a  type  submit  attribute   can be used without a form as well as in forms    text or html content allowed   css pseudo elements allowed  like  before    tag name is usually unique to a single form   vs    lt input type  button  gt     type should be set to  submit  to behave as a submitting element can only be used in forms  only text content allowed no css pseudo elements same tag name as most of the forms elements  inputs    -- in modern browsers  both elements are easily styleable with css but in most cases  button element is preferred as you can style more with inner html and pseudo elements

User · Answer

As far as CSS styling is concerned the  lt button type  submit  class  Btn  gt Example lt  button gt  is better as it gives you the ability to use CSS  before and  after pseudo classes which can help   Due to the  lt input type  button  gt  visually rendering different to an  lt a gt  or  lt span gt  when styled with classes in certain situations I avoid them   It s very worth noting the current top answer was written in 2009  IE6 isn t a concern now days so  lt button type  submit  gt Wins lt  button gt  styling consistency in my eyes comes out on top

User · Answer

I just want to add something to the rest of the answers here  Input elements are considered empty or void elements  other empty elements are area   base   br   col   hr   img   input   link   meta   and param  You can also check here   meaning they cannot have any content  In addition to not having any content  empty elements cannot have any pseudo-elements like   after and   before  which I consider a major drawback

User · Answer

This article seems to offer a pretty good overview of the difference   From the page      Buttons created with the BUTTON element function just like buttons   created with the INPUT element  but   they offer richer rendering   possibilities  the BUTTON element may   have content  For example  a BUTTON   element that contains an image   functions like and may resemble an   INPUT element whose type is set to      image     but the BUTTON element type   allows content       The Button Element - W3C

User · Answer

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

[html] <button> vs. <input type="button" />. Which to use?

Examples related to html

Examples related to html-input