Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

XHTML Tutorial - Using "button" Input Fields

By: FYIcenter.com

(Continued from previous topic...)

How To Use "button" Input Fields?

An "button" input field is defined as <input type="button" .../>. "button" input fields can be used to create client-side action buttons. If a client-side action button is clicked, a client-side script will be triggered. The client-side script could then submit the form or do other types of activities. There are other attributes you need to use for an "image" input field:

  • value="buttonValue" - Specifies the URL of the image file.
  • onclick="scriptCode" - Specifies the script to be executed when the button is clicked.

Here is a tutorial example with 3 button input fields:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Button Input Fields</title>
 </head>
 <body>
  <h4>Online Survey</h4>
  <form action="http://localhost/submit" method="get">
  <p style="background-color: #eeeeee; padding: 8px;">
   How did you find FYIcenter:<br/>
        <input type="radio" name="channel"
     value="google" checked="checked"/>Google search<br/>
        <input type="radio" name="channel"
     value="yahoo"/>Yahoo search<br/>
        <input type="radio" name="channel"
     value="friend"/>Your friend<br/>
   <input type="button"/>
   <input type="button" value="Test"/>
   <input type="button" value="Save"
    onclick="form.submit()"/>
  </p>
  </form>
 </body>
</html>

If you save the above document as button_input.html, and view it with Internet Explorer, you will see 3 buttons in the form as shown below. Go click each of those buttons to see what will happen:
            Button Iuput

(Continued on next topic...)

  1. What Is a "form" Tag/Element?
  2. What Are the Attributes of a "form" Element?
  3. What Is an "input" Tag/Element?
  4. How Many Input Types Are Supported by "input" Elements?
  5. How To Use "text" Input Fields?
  6. How To Use "password" Input Fields?
  7. How To Use "checkbox" Input Fields?
  8. What Are the Values Submitted on Checkbox Fields?
  9. How To Use "radio" Input Fields?
  10. What Are the Values Submitted on Radio Button Fields?
  11. How To Use "submit" Input/Action Fields?
  12. What Are the Values Submitted on Submit Button Fields?
  13. How To Use "reset" Input/Action Fields?
  14. How To Use "file" Input Fields?
  15. How To Use "hidden" Input Fields?
  16. How To Use "image" Input Fields?
  17. What Are the Values Submitted on Image Button Fields?
  18. How To Use "button" Input Fields?
  19. What Is a "textarea" Tag/Element?
  20. What Are the Attributes of a "textarea" Element?
  21. What Is a "select" Tag/Element?
  22. What Is an "option" Tag/Element?
  23. What Is a "label" Tag/Element?
  24. Can Two Forms Be Nested?
  25. Do Broswers Support Multiple Forms?


Selected Developer Jobs:

More...