HTML Button Navigate to Other Page - Different Approaches

Question

There are multiple ways to create a HTML button to navigate to other page   Method 1   lt button id  btn click  gt Click Me lt  button gt   lt script gt      btn click   on  click   function     window location    http   www google com        lt  script gt     Advantage  Separate JS from HTML  MVC  Disadvantage  Long codes  rely on JS Note  jQuery selector is optional  can use traditional JavaScript   Method 2   lt button onclick  window location  http   www google com   gt Click Me lt  button gt     Advantage  1-liner  no need assign ID to button Disadvantage  Mix JS with HTML  rely on JS   Method 3   lt a class  click-me  href  http   www google com  gt Click me lt  a gt   lt style gt   clickMe       -moz-appearance  button      -ms-appearance  button      -o-appearance  button      -webkit-appearance  button      appearance  button      text-decoration  none      color   000      padding  0 2em 0 4em      lt  style gt     Advantage  no need to rely on JS Disadvantage  Looks like a fake button  IE9  required   appearance is a CSS3 property   Note  this is from here   Method 4   lt form action  http   www google com  gt   lt button gt Click Me lt  button gt   lt  form gt     Advantage  Shortest code  no need to rely on JS Disadvantage  Misuse of  lt form gt  tag  Does not work if there is another submit button   Programmers  which approaches is the most efficient  and hence used widely   and why   Note  can we make this as community wiki

User · Answer

I use method 3 because it s the most understandable for others  whenever you see an  lt a gt  tag  you know it s a link  and when you are part of a team  you have to make simple things      And finally I don t think it s useful and efficient to use JS simply to navigate to an other page

User · Answer

I make a link  A link is a link  A link navigates to another page  That is what links are for and everybody understands that  So Method 3 is the only correct method in my book   I wouldn t want my link to look like a button at all  and when I do  I still think functionality is more important than looks    Buttons are less accessible  not only due to the need of Javascript  but also because tools for the visually impaired may not understand this Javascript enhanced button well   Method 4 would work as well  but it is more a trick than a real functionality  You abuse a form to post  nothing  to this other page  It s not clean

[html] HTML Button : Navigate to Other Page - Different Approaches

Examples related to html

Examples related to button