Number Input Elements - Instructions

Event enabled examples of some simple number input elements.

The page shows controls that send a ’number’ back to the server.

A Number and a Range.

These all have a set of list items that show the events that are triggered.

Number Control

Two instantiations of the Number input are shown. One with defaults, one with min, max and step.

step is the increment used when up or down are used to change the number.

min and max are the minimum and maximum that would be allowed to be input through a form submission, and are the min and max that the up and down controls will allow.

It is possible to manually enter a number outwith those values, but if the automated controls are used then the number will be reset to within those ranges.

It is important to understand that this functionality is implemented by the browser, as such it doesn’t need as much testing, more important for testing is the actual values in the min, max and step.

When used in a form context, the min, max will prevent the form from being submitted if the values are outwith the range.

Range Control

Two instantiations of the Range input are shown. One with defaults, one with min, max and step.

step is the increment used when the slider is used to change the number.

min and max are the minimum and maximum that would be allowed to be input through a form submission, and are the min and max that the up and down controls will allow.

The range is a little harder to set to invalid values. But, as per the Number control, any of the automated adjustment features would keep the value within the limits.

It is important to understand that this functionality is implemented by the browser, as such it doesn’t need as much testing, more important for testing is the actual values in the min, max and step.

When used in a form context, the min, max will prevent the form from being submitted if the values are outwith the range.

Explore the Events on the Controls

For each of the controls you are encouraged to interact with them using they keyboard and the mouse to see what events fire for each control.

Try tabbing between the controls and using keyboard.

It is possible to amend the value of the fields using JavaScript, try to do this.

Automating

For each of the controls.

  • Try to automate them with your tool of choice.
  • You can use the event listing to assert on, or assert on the value and state from the control itself.

You can learn more about Testing Input Elements in our reference section.