Introduction:

In this article we are going to explain what is <button> tag in html or why use button tag in HTML or how to use button element in html with example.

Description:

The <button> tag is used to define a clickable button in  HTML form on your webpage. inside a <button> element you can put content,like text or images.  

You should always specify the type attribute for a <button> tag. Different browsers use different default type for the button element.

HTML Button tag can be used inside and outside the form.

If you use it inside the form, it works as the submit button. You can also use it as reset button.

If you use it outside the form, you can call JavaScript function on it.

Example of HTML Button Tag

Let's see the code to display the button.


<!DOCTYPE html>
<html>
<head>
    <title>This is the example of button tag</title>
</head>
<body>
    <button name="button" type="button">Click Here</button> 
</body>
</html>

Output:




HTML Button Example: Calling JavaScript Function

Let's see the code to call JavaScript function on button click.

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of button tag</title>
</head>
<body>
   <button name="button" value="OK" type="button" onclick="hello()">
    Click Here
   </button>
    <script>
        function hello() {
            alert("welcome to Sqltutorialspoint");
        }
    </script>  
</body>
</html> 

Output:


 

HTML Button Example: Submit Form

Let's see the code to submit form on button click.

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of button tag</title>
</head>
<body>
    <form>
        Enter Name:<input type="text" name="name"  placeholder="name..."/><br />
        <button>Submit</button>
    </form>
</body>
</html>

Output:



HTML Button Example: Reset Form

Let's see the code to submit form on button click.

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of button tag</title>
</head>
<body>
    <form>
        Enter Name:<input type="text" name="name"  placeholder="name..."/><br />
        <button type="reset">reset</button> 
    </form>
</body>
</html>

Output:


 

I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like