Creating a Button that Executes a Script

You can associate a button with a script to give your visitor full control over when the script should be executed.

To create a button that executes a script:


Type <button type="button".


Type name="name", where name is the identifier for the button.


Type onclick="script", where script is the code (usually JavaScript) that will run when the visitor clicks the button.


If desired, type style="font: 1.5em Helvetica, Arial, sans-serif; background: yellow; color: red; padding: .3em" (or whatever) to change the appearance of the text on the button.


Type >.


If desired, type the text that should appear on the button.


Type </button>.

Figure 19.10. Notice that the script is the same as the one used in the example in Figure 19.7. The style information here is optional, but it does make the button stand out. I also could have added an image.

Figure 19.11. The button element is more thoroughly explained in Chapter 17, Forms.

Figure 19.12. A click on the button executes the script, as shown here.


  • You can use other intrinsic events with buttons, but onclick makes the most sense.

  • You can also add images to buttons. Simply insert the image between the opening and closing button tags (that is, after step 5 or 6).

  • You can also use buttons with forms (see pages 273 and 275).

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: