seo Question posted in
Some basic information to get you started with this can be found here.

Recomended way to create a HTML button that triggers javascript and submit? – SEO

Im creating some core components for a new website and are now on Buttons. There is several ways to create a HTML button but Im looking for a universal way(if there is one).

A button have a couple of key functions

  • Hover effect
  • Image background
  • Possible to place more elements more then text on the button
  • Link to other webpage
  • Submit form
  • Text
  • SEO compatible
  • Works with IE 9 and higher

I have been using regular links becouse of the “automatic” hover buth it does not feel right to set the href to # when using onclick.

Jquery has some help functions but I really dont like to have bound code to the button withou stating it on the button element itself.

Maybe a regular div with :hover effect is the best way to go?

Or should I create one button for each type that I need? Submit, link, javascript?

Is there a “best practice”?

Tags:

2

Answers


  1. 0

    Just like you said above, some buttons are appropriate for some cases:

    If you’re trying to make a button for a form, then the <input type="submit">, would be the way to go and I would not recommend using it as a button for a link because it was created for the <form> element.

    Now for links to other pages, any almost all HTML elements(p, h1,h2, li, div etc) would support button creation out of it as long as you styled(borders hover etc etc) it properly. Example: menu items most of the times are buttons created with the <li></li> tag. And of course, just like @JacobGray said, the <button></button> is the appropriate, semantic and easiest way to create one.

    About background images: All of them(both form buttons and other elements) support background image change. As long as you scale the image according to the size of your button.

    About javascript events, all of them will support as long as you id the elements you want javascript to handle.

    Login or Signup to reply.
  2. 0

    As i said in the comments <button>...</button> is the easiest way to go:

    <button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.
    Source: Moz Docs

    The button element can be used to submit a form, in fact, it even has a attribute for this purpose:

    <button type="submit">Submit</button>

    The button submits the form data to the server. This is the default if
    the attribute is not specified, or if the attribute is dynamically
    changed to an empty or invalid value.

    In most browsers, the type="submit" attribute is not needed, a button click will submit the form.
    The other types allowed are:

    type="reset": The button resets all the controls to their initial
    values.

    type="button": The button has no default behavior. It can have
    client-side scripts associated with the element’s events, which are
    triggered when the events occur.

    You can find more information at the Mozilla Docs and W3C

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search