Skip to main content
Engineering LibreTexts

11.9: Other Buttons

  • Page ID
    93852
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    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.

    <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.)


    11.9: Other Buttons is shared under a CC BY-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?