Using the input Element to Create Image Buttons and Maps

The type='image' input element creates buttons that display an image and submit the form when clicked. This type of input element supports the additional attributes:

Attribute	Description	New in HTML5
alt	Provides a text description of the element.	No
formaction	overwrite formaction from form element	Yes
formenctype	overwrite formenctype from form element	Yes
formmethod	overwrite formmethod from form element	Yes
formtarget	overwrite formtarget from form element	Yes
formnovalidate	overwrite formnovalidate from form element	Yes
height	the height of the image in pixels	No
src	the URL for the image	No

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <input type="hidden" name="recordID" value="1234" />
            <p>
                  <label for="name"> Name: 
                       <input value="Mark" 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"> Favorite: 
                          <input type="text" id="fave" name="fave" />
                  </label>
            </p>
            <input type="image" src="http://java2s.com/Book/HTML-CSSImages/star.png" name="submit" />
      </form>
</body>
</html>

When the user clicks the image, the browser submits the form and two data items representing the image input element. These represent the x and y coordinates where the user clicked,

Click to view this demo.

Home
HTML CSS Book
HTML

input Restricted: