Techniques for WCAG 2.0

On this page:

-

# H32: Providing submit buttons

## Applicability

Content that includes form controls.

This technique relates to:

- Success Criterion 3.2.2 (On Input)
  - How to Meet 3.2.2 (On Input)
  - Understanding Success Criterion 3.2.2 (On Input)

## Description

The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context.

## Examples

### Example 1:

This is a basic example of a form with a submit button.

Example Code:

    <form action="http://www.example.com/cgi/subscribe/" method="post"><br />
     <p>Enter your e-mail address to subscribe to our mailing list.</p><br />
     <label for="address">Enter email address:</label><input type="text"
     id="address" name="address" />
     <input type="submit" value="Subscribe" /><br />
    </form>

### Example 2:

The following example uses a server-side script (specified in the `action` attribute) that redirects the user to the requested page.

Example Code:

     <form action="http://www.example.com/cgi/redirect/" method="get"><br />
        <p>Navigate the site.</p><br />
        <select name="dest"><br />
          <option value="/index.html">Home</option/><br />
          <option value="/blog/index.html">My blog</option/><br />
          <option value="/tutorials/index.html">Tutorials</option/><br />
          <option value="/search.html">Search</option/><br />
        </select><br />
      <input type="submit" value="Go to Page" /><br />
      </form>

## Resources

Resources are for information purposes only, no endorsement implied.

- Navigational pulldown menus in HTML by Jukka Korpela discusses a few techniques that work or do not work.

## Related Techniques

- G80: Providing a submit button to initiate a change of context
- H36: Using alt attributes on images used as submit buttons
- H84: Using a button with a select element to perform an action

## Tests

### Procedure

1. Find all forms in the content

2. For each form, check that it has a submit button (input type="submit", input type="image", or button type="submit")

### Expected Results

- #2 is true

- Top
- Contents
- Intro
- Previous: Technique H30
- Next: Technique H33