Buttons in JavaScript:
To write scripts using buttons, we will first need to know how to place a button on the page. To do this, you will need to use the <FORM> tags around the button tag. Here is an example of the HTML that will place a button on the page:
<form>
<INPUT type="button" value="OK" name="button" onClick="Show>
</form>
<Form> tag is used to create the form on which we put the button.
<Input> tag is used to create an input area of some kind.
Type ="button" is used to create our input area to be a button.
Value="OK" This will be the text people will see on the button. Write whatever you want your visitors to see.
Name= "Button" You can give the button a name for future reference and possibly for use in a script.
How will change background color of your page?
In JavaScript you can also change the background color of your page by using the following command:
Document.bgolor= 'color'
For example: In this example you will see how to change the background color of the page.
<html>
<head><title>Change Backgroung color</title>
</head>
<form>
<INPUT type="button" value="Change olive color" name="button1" onClick="document.bgColor='olive'"><br>
<INPUT type="button" value="Change fuchisia color" name="button2" onClick="document.bgColor='fuchsia'"><br>
<INPUT type="button" value="Change maroon color" name="button3" onClick="document.bgColor='maroon'"><br>
<INPUT type="button" value="Change to Back" name="button4" onClick="document.bgColor='white'"><br>
</form>
</html>
Output:
Figure 1: Output of the above code.
When you click on any button then background color will be change. Suppose you click on 'Change olive color' button then you will see the following output.
Figure2: Page displaying with background color.
How to use your button as a link button?
You can use a button as a link button by using the following command.
Window.location= "url"
For Example: See the following html code to link the button and give the URL.
<html>
<form>
<INPUT type="button" value="Go to my other Page!" name="Link" onClick="window.location='http://www.yahoo.com'"><br />
</form>
</html>
Output:
Figure 3: Click on this button.
When you click on this button then the following page will open.
Figure 4: Another page.