HTML Buttons, and how to use them?

HTML & CSS
1

I have been looking a little at the <button> tag.

I am confused on how to properly use it. It seams that they are used within forms, whilst others use it outside forms. I also wanted to place a hyperlink inside this, but it is not liked very much from my validator. My question is how would you use them properly outside a form, or would you be forced to use an a tag instead.

Awesome CSS Buttons used both buttons and a tags for their buttons. They both used them outside a form, not entirely sure if this is for presentational purposes, rather than functional.

2

I wouldn’t be using the <button> outside a form. (The linked examples probably show them out of content because it is just focusing on them rather than forms, as such.)

Buttons offer more options that submit <inputs>, which make them kind of handy. But they are still just meant for forms, I’m pretty sure. Outside of a form, I would just use a nicely styled <a>.

If you want a hyperlinked button, just use <a> without the button.

The word “button” and the <button> element tend to get a bit confused these days.

3

Thanks @ralph_m;

It certainly explains things.

4

Hm, they were created specifically to allow scripting on something that accepted more styling. When I read about them I believed they meant “thingies put on the page to run some script when clicked”, as well as having a form input that could accept more styling (and elements inside).

In fact I would argue an anchor is not as good as a button on a page to run a script if you wanted to be more semantic: a button is activated by hitting the spacebar (usually) and runs some script. An anchor supposedly means “hyperlink” and should take you somewhere, and is activated by hitting enter (usually). So if you want something to run when the user activates it, and not take them somewhere, a button should be better.

We use anchors though because IE made life hard for buttons, like giving them big black ugly borders we had to hack around to get rid of. Wha!

5

Sounds like, with scripting off, a button in that case would do nothing, which sounds like a bit of a #fail to me … unless it’s hidden or not there with scripting off, I guess.

6

True.

7

Using a <button> inside a form it will do something even without JavaScript since the default type for a button inside a form is type=“submit”

8

True, but the problem with the button element is that it’s a bit deprecated in my opinion. Now we have CSS3 and those buttons that have tables inside should remain in the past. Just my opinion…