HTML buttons with the BUTTON tag

How to create more varied HTML buttons using the BUTTON tag, which allows you to place images and other content on the button.

We are going to see an HTML tag that is used to make buttons, which we had not talked about before in our . This tag is , which allows the creation of more personalized buttons, so it offers some advantages, and also some disadvantages that we are going to discuss here. First of all, we should say that in .com we had already commented on another label that was used to make buttons, the label, which also has other uses. We will also explain the differences between making buttons with e .

First, you should be familiar with the uses of the INPUT tag, which is used to do various things, such as text fields, hidden fields, submit form buttons, delete your data, and normal buttons. Let’s see them before continuing.

Using the tag

The BUTTON tag is used with an opening

tag and a closing tag. Between the two labels, opening and closing, the content that will go inside the button is placed.

It has the particularity that the content you want can be placed inside the button, that is, between the opening and closing tags you can place text at will, but also other HTML tags, such as images, line breaks, bold or whatever. we may need.

Let’s see an example:

Hello this is a button

I can put newlines in it!

---

And other things

Which would look like this:

hi this is a button

I can put newlines in it!

And other things

As you can see, it allows you to bring a lot of creativity to the buttons that we incorporate into web pages, much more than the INPUT tag, which only allows you to place text inside the button:

BUTTON attributes

Now let’s quickly see the attributes that we can use:

• name: used to give the button a name. When the form is submitted, the button data will be sent under this name.
• type: used to indicate the type of button, which could be: button for a normal button, reset for a button to delete data from the form, and submit for a button to submit the form.
• value: to specify the value of a button. The value is what will be sent by form, at the time of submit. But be careful here because there may be differences between browsers, which we will see below.
• disabled: This attribute is used to make the button disabled.

Cross-browser incompatibilities with the BUTTON tag

Unfortunately, the BUTTON tag has different interpretations by different browsers on the market. From web development .com we warn that care must be taken when we use it, because these incompatibilities could harm the proper functioning of the page.

1. By default, BUTTON’s type attribute has the value “button” in all browsers except Internet Explorer, at least up to version 7, which defaults to “submit”. We solve this simply by always placing the type attribute with the value we want.
2. When a form is submitted with a button created with the BUTTON tag, Internet Explorer sends as the value of the button what is written on it, that is, the text between and with all the tags it can have inside Other browsers submit whatever value attribute the button has, although they only do this when the button is of type=”submit” and if the form has been submitted by clicking that button.

Of these two incompatibilities, the second one is more difficult to solve, because we should know the browser that the user is using in order to know the behavior of the BUTTON. That is why it is best not to base the operation of scripts in forms on this tag. For the rest, it has some interesting features that could come in handy at some point.