11.9: Other Buttons

The two primary types of buttons appearing on forms are submit and reset buttons. These two buttons are associated with form submission to programs that process form information. Other general-purpose buttons can be defined. These are normally associated with browser scripts for local processing, of forms and otherwise, by JavaScript routines embedded on the Web page.

The <input type="button"> Tag

An <input type="button"> tag is used to create general-purpose buttons to call browser scripts located on the same Web page. Its general format is shown below.

<input type="button"
  id="id"
  name="name"
  value="text"
>

Figure \(\PageIndex{1}\): General format for <input type="button"> tag.

An id or name may be necessary if the button is referenced in a script; otherwise these attributes need not be coded. A value attribute is required to supply a label for the button; otherwise, an unlabeled button appears.

This type of button usually has the purpose of responding to a mouse click and activating an embedded script or calling a JavaScript function to perform some processing.

The <button> Tag

The <button> tag provides versatility in producing buttons. It can be set up as a submit button, a reset button, or a general purpose button. As a container tag, it can enclose any text or HTML code to provide text and/or graphic displays on the face of the button. The general format for this tag is shown below

    <button
      type="submit|reset|button"
      id="id"
      name="name"
    >
      ...text and HTML tags
    </button>

Figure \(\PageIndex{2}\): General format for <button> tag.

When defined as type="submit" or type="reset", the button works like any other submit or reset button. When defined as type="button", it requires a browser script to take action on a button click.

The label for the button appears between the opening and closing tags. This can be a simple text label, or HTML tags can be coded to decorate the text or to include a graphic image on the button.

The following general-purpose button illustrates a layout using HTML tags to supply a graphic image and text for the face of the button.

Rabbit

<style>
  button     {float:left; height:100px; width:180px; border:outset 3px;
              margin-right:10px}
  span#Title {font-family:impact; font-size:14pt; color:#DAA520}
  span#Text  {font-family:verdana; font-size:10pt}
  img        {width:50px; height:39px}
  iframe     {width:225px; height:185px; border:outset 10; margin-right:65px}
</style>

<button type="button"
  onclick="
    if (document.getElementById('Text').innerHTML == 'View Picture') {
      document.getElementById('Picture').src='W-Colossus.gif'
      document.getElementById('Text').innerHTML='Hide Picture' }
    else if (document.getElementById('Text').innerHTML== 'Hide Picture') {
      document.getElementById('Picture').src=''
      document.getElementById('Text').innerHTML='View Picture' }" 
>
  <span id="Title">Rabbit</span><br/>
  <img src="bunny.gif" alt="Image of a rabbit."/><br/>
  <span id="Text">View Picture</span>
</button>

<iframe id="Picture" scrolling="no"></iframe>

Figure \(\PageIndex{3}\): Code to style and script a <button> tag.

Notice how the text and image appearing on the button are coded inside the opening and closing <button> tags in much the same way as they would be coded on a page. (Note: An <iframe> tag normally is coded with a name attribute that identifies it as the target for links. Since the frame is scripted, however, an id is assigned for script reference.)