# Using a button with a select element to perform an action

ID: H84

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the `select` element. The user may inspect the different values of the `select` element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.

This is particularly important for users who are choosing the value of the `select` element via the keyboard, since navigating through the options of the `select` element changes the value of the control.

## Examples

### A calendar

A Web page lets the user choose a quarter of any year and display the calendar for those months. After the user has set the quarter and year, they display the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.

    <label for="quarter">Quarter:</label>
    <select id="quarter" name="quarter">
      <option value="1">Quarter 1 (January - March)</option>
      <option value="2">Quarter 2 (April - June)</option>
      <option value="3">Quarter 3 (July - September)</option>
      <option value="4">Quarter 4 (October - December)</option>
    </select>
    <label for="year">Year:</label>
    <input name="year" type="text" id="year">
    <button name="show" type="button">Show</button>

### Choosing an action

A `select` element contains a list of possible actions. The action is not performed until the user presses the "Update" button.

    <form action="/process-form" method="post">
      <label for="action">Options:</label>
      <select name="action" id="action">
        <option value="add">Add</option>
        <option value="remove">Remove</option>
        <option value="cancel">Cancel</option>
        <option value="order">Order</option>
      </select>
      <button name="submit" type="submit">Update</button>
    </form>

## Tests

### Procedure

For each `select` element/button element combination:

1. Check that focus (including keyboard focus) on an option in the `select` element does not result in any actions
2. Check that selecting the button performs the action associated with the current `select` value

### Expected Results

- All checks are true.

## Related Techniques

- H32
- G80

## Resources

- HTML - the `button` element.
- HTML - the `select` element.