HTML Button Tag Functions and Useful Attributes

Udemy Editor

Buttons! Everybody loves buttons. With the use of the HTML button tag, you can create your very own customizable buttons for your website or blog. If you’re unfamiliar with the HTML button tag, there are a few things you need to know to use it properly, and a few cool attributes you can learn to cater its use specifically to your needs. We’ll go over them all in this guide, and provide you with some handy resources to learn even more HTML coding tips. Check out this entry level HTML workshop for starters!

How to Create a Button

First thing’s first: how to create a button with the HTML button tag?

<button>Click Here!</button>

Without any fancy CSS to make it look nice, the above HTML should generate a button that looks like this:

You can learn how to make your site elements look nice with this beginner’s course on CSS. Looks aside, this button has another more important problem. It’s useless! Nothing happens when you click on it, though depending on your web browser, it will display the default “active button” animation when clicked. Still, a button that doesn’t do anything or take you anywhere is pointless. So what can you do?

How to Create a Button-Triggered Prompt

There are a couple event attributes that can be set inside the <button> tag and will trigger if their assigned action is carried out. For instance, the onclick event script is triggered when the mouse clicks on the <button> element.

<button type="button" onclick="alert('You did it!')">Click Here!</button>

The above code generates an HTML button that looks the same as the one pictured previously. When you click on this button, an alert box that displays “You did it!” will appear. You can also use the ondblclick event script, which requires the user to double-click on the button in order for the event to trigger. Confused about how this all works? Learn the ins and outs of HTML with this HTML prep course.

Attribute Values

One thing that might be particularly confusing about the above code is the type attribute. What does it mean? In short, the HTML button tag has three type attribute values.

type=”button”
type=”submit”
type=”reset”

The button type makes the button a clickable button, the submit type enables the button to submit form data, and the reset type enables the button to reset form data back to its starting values.

How to Create a Disabled Button

With the disabled HTML button tag attribute, you can create a button that is grayed out. This disabled button will appear faded by default, with no function or active button animation when the user clicks it. The disabled attribute is a boolean, meaning its presence will denote the button’s disabled status as true. As long as this condition is true, the button will remain inactive. While you don’t necessarily need to know about boolean logic to work with basic HTML, anyone who calls themselves a coder or a web developer should at least know the gist of it. Read up on boolean logic as it relates to the Java programming languagein this guide.

Back to buttons. A disabled one in particular is useful for scenarios where a condition somewhere else on the page must be met before the user can be allowed to click on that button. See how to create one below.

<button type="button" disabled>Click Here! Just kidding.</button>

This will generate the following:

Even though this is just an image, the real thing will act just as the depiction above – static, inactive, and pretty useless. However, it’s useful, for instance, when you want a user to click a button only once. For instance, a user clicks a submit button to send a form to your database. Clicking it twice submits the form more than once. To stop this from happening, you can set the button’s attribute to disabled to limit the user to only one submission.

Create an Autofocused Button

Have you ever tabbed around a page and watched each link and button highlight itself in succession? The autofocus attribute creates a button that automatically highlights itself upon the page loading.

<button type="button" autofocus onclick="alert('You did it!')">Click Here!</button>

When the page with this code loads, the button will appear like this, automatically:

Because of this, the user can hit Enter on their keyboard, and the button will active, since it is already the focused element on the page. Learn more web development skills in this course.

Create a Form Submittable by a Button

If your website requires users to fill out information in a form and then send it in, you can assign a button to that form for submission purposes. This would look something like this:

<form action="example_form.asp" method="get" id="nameage">
Name: <input type="text" name="usersname"><br>
Age: <input type="text" name="usersage"><br>
</form>
<button type="submit" form="nameage" value="Submit">Submit</button>

This will create a form and a button that looks like this:

If you’re confused about the example_form.asp part of the <form> tag’s action attribute, check out this web development course on ASP. All you need to know in terms of the HTML button tag here is that the information input into the above form is submitted via the button, which is tied to the form with id of “nameage” through the form attribute in the button tag.

Specify the Form’s Target Using Individualized Buttons

With the use of the formtarget attribute, you can specify different targets for the form data in multiple buttons, giving the user options. Example:

<form action="example_form.asp" method="get">
 City: <input type="text" name="city"><br>
 State: <input type="text" name="state"><br>
<button type="submit">Submit</button>
<button type="submit" formtarget="_blank">Submit to a new window</button>
</form>

The only visual difference between these buttons, if you’re using the default style, is what the text inside them says. The difference that counts is where each button will display the response to the user’s submitted input.

The regular “Submit” button, which has no specified formtarget attribute, will simply open the response in the same frame as the form. The “Submit to a new window” button’s formtarget attribute value of “_blank” will open the response in a new window or tab, depending on the user’s internet browser. There are five possible formtarget attribute values:

formtarget=“_blank” – Opens the response in a new window or tab.
formtarget=“_self” – Opens the response in the same frame. The default value.
formtarget=“_parent” – Opens the response in the parent frame.
formtarget=“_top” – Opens the response in the window.
framename – Opens the response in the designated iframe.