Basics of HTML form button
Button Object :
Button is one of the most commonly used form types. The following syntax will
get the button object in javascript
Syntax: document.formname.buttonname
Example Code:
<form name=buttonform>
<input name=button1 value=test type=button>
</form>
<script language="javascript">
var buttonobject= document.buttonform.button1;
</script>
Here are the events, dom properties and method associated with
button element.
Event Handlers: Associated with Form Button:
All the example below use a javascript function output
<script language=javascript>
function output()
{
alert("testing button events");
}
</script>
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties
that can be used to get and alter button properties in javascript.
The below examples are based on the form
<form name=testb>
<input name=myb type=button value=xxx>
</form>
| DOM Property | Description | Example |
| name | Used to get button's name |
To Get:
var ss = document.testb.myb.name;
|
| type | Used to get form type |
To Get:
var ss = document.testb.myb.type;
|
| value | Used to set or get button's value |
To Get:
var ss = document.testb.myb.value;
To Set::
document.testb.myb.value = "testy";
|
| disabled | Used to disable or enable a button.
By setting this property as true we can disable. |
To Disable:
document.testb.myb.disabled = true;
To Enable::
document.testb.myb.disabled = false;
|
DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods
that can be used to do dynamic changes like button click using javascript.
| DOM Method | Description | Example |
| click() | Used to dynamically make a button click |
To Click:
document.testb.myb.click();
|
| blur() | Used to dynamically make the button blur |
To Blur:
document.testb.myb.blur();
|
| focus() | Used to dynamically get focus on the button |
To Focus:
document.testb.myb.focus();
|
Example: Change Button value on mouse over
<script language=javascript>
function bevent()
{
var xx = document.xx.btest;
xx.value= "testing button event";
}
</script>
<form name=xx>
<input type=button name=btest onMouseOver="bevent()">
</form>
Result:
| 
Introduction
