Text Input Elements - Instructions

Event enabled examples of some simple input elements.

The page shows controls that send a text value to the server.

A text, search, password, email, url, and tel.

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

It is possible to add some validation to the input using pattern. Some elements email, url already have some pattern validation which you will see in action in the form that uses them.

Attribute Controls

One of the text inputs has a maxlength attribute to limit the amount of characters that can be input to 20. This offers some input validation but it is very easy to amend the DOM to remove or amend this value, so it should never be the only source of length validation used for the value.

tel

tel can exhibit different user interface when used on a mobile device.

Try to use a mobile device or simulator to check this statement.

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.

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.