How to Add Buttons to an HTML5 Form

6 of 6 in Series: The Essentials of HTML5 Forms

The ubiquitous button is a staple of any web page, and if you're building your page using HTML5, you can include all the usual types of buttons. There are three main types of buttons, although they all look identical to the user:

  • Standard button: A standard button just looks like a button. These buttons are used quite a bit in JavaScript programming to trigger some kind of action on the client end.

  • Submit button: This button is normally used in server-side programming. It packages up all the data in the form and submits it to a program that lives on a remote Web server.

  • Reset button: This special button type has built-in behavior. When the user clicks a reset button, all the data in the form is reset to its original default values.

The form in the figure shows each type of button, all looking pretty much the same:

image0.jpg

In addition to the three types of buttons, button elements can be created in two different ways. The first is with the input element; just use the following code:

          <input type = "button"
                 value = "input button" />

When used in this way, the value property becomes the label of the button, and the type property indicates which type of button you intend to build. It isn't necessary to add a label to a button because the label is implied.

But because buttons aren't really used for input but to specify that the user wants to do something, a new button syntax has evolved:

          <button type = "button">
            standard button
          </button>

This syntax introduces a button tag with start and end tags. The type attribute is used to indicate which type of button you want to use. (The default type is "submit", but it's used primarily in server-side development.)

The button syntax tends to be cleaner, and it makes CSS formatting a bit easier, as buttons are rarely formatted in the same way as other input elements.

The code for a web page with both types of button looks like this:

<!DOCTYPE HTML>
<html lang = "en">
  <head>
    <title>formDemo.html</title>
    <meta charset = "UTF-8" />
  </head>
  <body>
    <h1>Form Demo</h1>
    <form>
      <fieldset>
        <legend>Buttons</legend>
        <p>
          <button type = "button">
            standard button
          </button>
          
          <input type = "button"
                 value = "input button" />
          <input type = "reset" />
          <input type = "submit" />
        </p>       
      </fieldset>     
    </form>
  </body>
</html>
blog comments powered by Disqus

SERIES
The Essentials of HTML5 Forms

Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com