How to Use the HTML Button Tag

The HTML <button> tag can be used for opening or closing a window.

The HTML <button> tag is used to create a push button on a website. All major browsers support the <button> tag. The <button> tag must be specified to be one of three types: a "button" button, a "reset" button or a "submit" button. The <button> tag is useful for allowing visitors to reset or submit a form, as well as providing site navigation since it draws a visitor's attention more than a plain text link on a page. A <button> tag allows you to place text or an image inside the button.

Instructions

1. Open the HTML file of the Web page you want to place the button on in your preferred HTML or plain text editor.

2. Locate where you want the button to appear and click to move the cursor to that spot.

3. Type

   <button

   to start the opening <button> tag.

4. Type

   type="reset"

   to create a button to reset a form.

   A type value of "submit" creates a button to submit a form. A type value of "button" creates the default button that does nothing until you define it. Then define this default button by typing

   onclick='script'

   Replace "script" with the actual script code to run when the button is clicked. For example, to tell the button to take the visitor to a URL, type

   onClick="window.location='http://www.domain.com'"

5. Complete the opening <button> tag by adding the > symbol at the end.

6. Type the text or use an <img> tag to set the text or image you would like to appear in the button.

7. Close the tag by typing:

   </button>

   For example, a completed button tag that directs visitors to a URL would look like

   <button onClick="window.location='http://www.domain.com'">Click Here to Go to Domain.com</button>

8. Save the HTML file, and upload it to your Web server.

Tips & Warnings

• Check the Web page after it is uploaded to see that the button is working properly.

References

• JavaScript Kit: Understanding the <Button> Tag of HTML 4.0
• W3Schools.com: HTML <Button> Tag