HTML / CSS - Buttons - When to Use What

Question

I have a pretty simple question regarding buttons on HTML pages.

As we know, there are several possibilities for their creation. You can set display: block; on a so that you can assign it color, width, and height. But there is also an HTML button element and a submit element.

When to use what? For example, when creating a form, I need a submit element, if I remember correctly. But when I have a button outside the form, I can use regular a . But, nevertheless, I do not know to use button .

Could you help me with this?

Answer 1

Anchors ( <a> ) should be used when it is a link , not a form submission.

Search engines cannot follow links sent by input or button , only a . Therefore, for SEO purposes, it is best to use link anchors.

If its a form, you should always use either button or input , because they can submit the form when you press the enter button (as opposed to links) and are usually better for accessibility.

I will not understand in detail whether to use button or input , since it already has a separate entry:

<button> vs. <input type = "button" />. What to use?

Answer 2

<button>

Button ( <button> ) The HTML element is a click button.

<a>

The HTML anchor element ( <a> ) defines a hyperlink, a named target for the hyperlink, or both.

Answer 3

This article is pretty cool in my opinion: The difference between anchors, inputs and buttons

Answer 4

Recently, I have used buttons as JavaScript hooks if it feels good to bind event handlers to buttons and not to an anchor element.

Anchor marks represent a location, whereas a button is more an action for me. I used the buttons as slide navigation to show / hide content and execute ajax requests .: D

Answer 5

in the form you must use the appropriate element.

'a' doesn't really fit in the form.

pay attention to the main purpose of the elements on the W3C, for example.

because you can take any element, and with CSS or JS you can change the behavior and goals ... and this is so bad. (customs, accessibility, understanding)

Answer 6

According to w3Schools.com ,

Definition and use

The <button> defines the click of a button.

Inside the <button> element, you can place content, such as text or images. This is the difference between this element and the buttons created with the <input> element.

Tip. Always specify the type attribute for the <button> element. Different browsers use different default types for the <button> element.

And:

Tips and notes

Note. If you use the <button> element in HTML form, different browsers may send different values. Use <input> to create buttons in the HTML form.

For what I see, the <button> tags are for use outside of forms and <input type="button"> inside.

By default, both styles are written as your browser, used for the <input type="button"> style, unlike the <a> tag.