button tag in html with example

Home » HTML » HTML Tags » button tag in html with example

button tag in html with example

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <button> tag is used for creating a button within forms.
Although you can also use the <input> tag to create an HTML button, the <button> tag does have some advantages.
In particular, you can place HTML between the <button></button> tags.This enables you to do things you wouldn't normally be able to with the <input> tag.
Always specify the type attribute for a <button> element.
Different browsers may use different default types for the <button> element.
The <button> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>Button</title>
     </head>
     <body>
     <button>Click It!</button>
     <button type="button">Press</button>
     <button type="button" value="Press">Click</button>
     <button type="button" value="Press" name="b1">Clicked</button>
     <button type="button" disabled="disabled">Disabled</button>
     </body>
     </html>

Demo :

In the above example, we have rendered button using button tag.

Button and Style :

    <html>
    <head><title>ButtonJavascript</title>
    <style type="text/css">
    button
    {
    color:silver;
    background-color:black;
    font-size:20px;
    font-family:comic sans ms;
    }
    <style>
    </head>
    <body>
    <button>Click It!</button>
    </body>
    <html>

Demo :

In the above example, we have applied CSS to button.

Button and Javascript :

<html>
<head><title>ButtonJavascript</title>
<script type="text/javascript">
function button()
{
var element=document.createElement("button");
element.setAttribute("type","submit")
element.setAttribute("onClick","javascript:alert('This is Javascript');");
var text=document.createTextNode("Click");
element.appendChild(text);
document.getElementById("button").appendChild(element);
}
</script>
</head>
<body>
<div id="button">
</div>
<input type="button" id="b1" value="Press" onclick="button()">

Demo :

In the above example, we have rendered a button using javascript. On click of this generated button we show message on alert box.