Using the input Element to Create Buttons

Description

The submit, reset, and button types of input element create buttons that are very similar to those created when using the button element.

The input Element Types That Create Buttons are listes as follows.

  • submit - Creates a button that submits the form. Additional Attributes: formaction, formenctype, formmethod,formtarget, formnovalidate
  • reset - Creates a button that resets the form.
  • button - Creates a button that performs no action.

The additional attributes that are available when you use the submit type are the same as when you use the submit button element.

The reset and button types don't define any additional attributes.

For all three of these input types, the label that is displayed on the button is taken from the value attribute.

Example

The following code uses the input Element to Create Buttons


<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p><!--from www.ja v  a  2  s  .  c  om-->
    <p>
      <label for="password"> Password: 
      <input type="password" placeholder="Min 6  characters" id="password" name="password" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" /> 
    <input type="reset" value="Reset Form" /> 
    <input type="button" value="My Button" />
  </form>
</body>
</html>

Click to view the demo

The input button elements cannot use the button element to display marked up text.





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed