. For example, when a user clicks an
external link, you may want to ask the user whether they want to submit the form before
leaving the page. In the example, I styled the link to look like a button to make the point
that links can look and function like buttons. From an accessibility point of view, it’s better
to use button elements for buttons rather than links, because a screen reader says “button”
when it encounters a button and says “link” for a link.
Pattern
HTML
<form id="ID" method="post" action="URL">
<input type="submit" id="NAME" name="NAME" value="TEXT" />
<input type="reset" id="NAME" name="NAME" value="TEXT" />
</form>
<input type="button" id="NAME" name="NAME" value="TEXT" />
<button id="NAME" name="NAME"> TEXT </button>
<a id="NAME" href="URL"> TEXT </a>
Location This pattern works anywhere inline elements work.
Styling You can apply styles to the various types of button elements to replace proprietary styles
supplied by the browser, but your results may vary in different browsers and operating
systems. The example embeds three submit buttons and one reset button in a form. The
first submit button is left unstyled, which renders it as a button, but the exact look varies in
different browsers and operating systems. The second submit button, #submit2, displays a
background image. I removed all text in the value attribute to prevent it from being
displayed over the image. When this button is clicked, the form data is submitted, but there
is no button value to submit. This is only a problem when you have multiple submit
buttons in a form and want to take different actions depending on which one is clicked.
(^)
(^)
(^)
(^)
(^)
(^)
(^)
(^)
(^)
