HTML Tutorial: Button Examples

by Ridwan Fadilah on Mar 10, 2020 HTML Tutorial: Button Examples

Basic HTML tutorial about HTML Button Element. A usage, attributes, and example

HTML Button is a clickable button and accessible by the user. You can find the button on every website. Now, in this tutorial, We'll learn the basic tutorial of How to add an HTML button element.


Definition and Usage

HTML button element are represented by the <button> tag. The <button> element is a clickable button to submit a form or anything that can be accessed by the user. You can put content like a text or an image inside the <button> element. Check the example below.

Example 1:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <button>I'm a Button</button>

    </body>
    </html>

This is a default button:

HTML Tutorial: Button Examples - Default


Button type Attribute

HTML button must have a type attribute. If the <button> element did not have a type attribute, the button type will set default by the browser. Different browser use different default types for the <button> element. You must specify the type for the <button> element.

Example 2:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <button type="button">I'm a Button with type attribute button</button>
        
    </body>
    </html>

Is not change the style of button, but have a different type:

HTML Tutorial: Button Examples - Button type

You can set the type attribute with "submit" to submit a form, or "reset" to reset the text field. But, the <button> must be associated with the <form> element.

See this example to use the "submit" type.

Example 3:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <form action="/action_page.php">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <button type="submit">Submit</button>
        </form>
        
    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Button Examples - Type Submit

You can use the <button> element or <input> element to represent the button.

Example 4:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <form action="/action_page.php">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <input type="submit" value="Submit">
        </form>
        
    </body>
    </html>

It has no difference.

HTML Tutorial: Button Examples - type submit with input element
To use the reset button type, just follow this example.

Example 5:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <form action="/action_page.php">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <input type="reset" value="Reset">
        </form>
        
    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Button Examples - Type reset with input element


When you click the button, the name in the text field will reset (to the first values). In this example, the form element no have value. So, the text field will empty.

HTML Tutorial: Button Examples - Type reset with input element


Button Style

You can change the button style using CSS property. HTML button style is presented by default, resembling the platforms the user agent runs on. Use a "style" attribute followed by CSS property like text-color, padding, margin, or background-color. Let's see the example.

Example 6:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <button name="button" type="button"
                style="margin: 16px; padding: 16px; background-color: darkblue; color: aliceblue; border: none;border-radius: 4px;font-size: 12px">Styled button</button>
        
    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Button Examples - Styled button

Now, the background color of the button has changed to dark blue. 

See the basic tutorial about Set or Change HTML Background Color & HTML Color Codes to learn more.


Button with JavaScript Function

By adding the javascript function, you can use the HTML <button> element as a link. Just add the "onClick" attribute inside the <button> tag, followed by javascript syntax and the link address of a page or sites.

Here's the example.

Example 7:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <button onClick="window.location.href = 'https://google.com'" style="padding: 16px; background-color: darkblue; color:aliceblue; border-radius: 4px;font-size: 12px">Go to Google</button>

        <button onClick="document.location.href = 'page2.html'" style="padding: 16px; background-color: darkblue; color:aliceblue; border-radius: 4px;font-size: 12px">Go to Page 2</button>
        
    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Button Examples - Button as a link

You can also use the button to show an alert or pop up in the browser by using the javascript function.

Example 8:   

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

        <button name="button" type="button" style="margin: 16px; padding: 16px; background-color: darkblue; color: aliceblue;border-radius: 4px;font-size: 12px" onClick="alert('Hello World!')">Click Me!</button>

    </body>
    </html>

When you click the button, the page will say "Hello World!":

HTML Tutorial: Button Examples - BUtton start click


Attributes

This element's attributes include global attributes.

Attributes Description
autofocus (HTML5 Boolean attribute) Specifies that the button should have input focus when the page loads. Only one element can have this attribute. Value "autofocus"
disabled (Boolean attribute) It cannot be pressed or focused. Value "disabled"
form (HTML5) Specifies which form the button belongs to. Value "form_id"
formaction Specifies where to send the form-data when a form is submitted. Only for type="submit". Value "URL".
formenctype (HTML5) If the button is a submit button, (associated with a <form> and doesn't have type="button"),  specifies how to encode the form data that is submitted. Value "application/x-www-form-urlencoded", "multipart/form-data".
formmethod (HTML5) Specifies how to send the form-data (which HTTP method to use). Only for type="submit". Value "get, post".
formnovalidate (HTML5) This attribute is also available on <input type="image"> and <input type="submit"> elements. Value "formnovalidate"
formtarget (HTML5) Where to display the response from submitting the form. Value "_blank", "_self", "_parent", "_top", "framename".
name Specifies a name for the button. Value "name"
type Specifies a type for the button. Value "button, reset, submit"
value Specifies an initial value for the button. Value "text"

That is the basic tutorial about the HTML Button Elements. If you want to try the demo of the example, You can find the full source code of these examples on our GitHub.

Thanks!

Loading…