Using the input Element to Create Buttons

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

TypeDescriptionAdditional Attributes
submitCreates a submit button.formaction, formenctype, formmethod, formtarget, formnovalidate
resetCreates a button that resets the form.None
buttonCreates a button that performs no action.None

The label that on the button is taken from the value attribute.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <p>
                  <label for="name"> Name: 
                      <input value="Adam" id="name" name="name" />
                  </label>
            </p>
            <p>
                  <label for="password"> Password: 
                     <input type="password" placeholder="Min 6 characters" id="password" name="password" />
                  </label>
            </p>
            <p>
                  <label for="fave"> Choice: 
                      <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 this demo.
Home 
  HTML CSS Book 
    HTML  

input:
  1. <input> element
  2. input element max size
  3. input text field size
  4. input text field initial value
  5. input text field placeholders(gray text)
  6. Using a Data List
  7. Read-Only input text field
  8. Disabled Text Boxes
  9. input element for password input
  10. Using the input Element to Create Buttons
Related: