User input methods and controls

Web forms require user input. When designing web forms, or really any web content, it's important to consider how users interact with their devices and browsers. Web user input goes beyond simple mouse and keyboard: think of touchscreens for example.

In this article, we take a look at the different ways users interact with forms and other web content and provide recommendations for managing user input, real-world examples, and links to further information.

As you develop more complex and interactive forms or other UI features, there are many HTML elements and JavaScript APIs you may want to investigate. For example, you may want to create custom form controls that require non-semantic elements to be content editable. You might want to support touch events, determine or control the screen's orientation, make a form take up the full screen, or enable drag and drop features. This guide introduces all these features, and directs you to more information on each topic.

To provide a good experience to the greatest number of users, you need to support multiple input methods, including mouse, keyboard, finger touch, and so on. Available input mechanisms depend on the capabilities of the device running the application.

You should always be mindful of keyboard accessibility — many web users only use the keyboard to navigate websites and apps, and locking them out of your functionality is a bad idea.

Topics covered

  • To support touch screen displays, touch events interpret finger activity on touch-based user interfaces from mobile devices, to refrigerator panels, to museum kiosk displays.
  • The Fullscreen API allows you to display your content in fullscreen mode, which is needed if your form is being served on a refrigerator or museum kiosk.
  • When you need to create a custom form control, like a rich-text editor, the contentEditable attribute enables creating editable controls from normally non-editable HTML elements.
  • The Drag and Drop API allows users to drag elements around a page and drop them in different locations. This can help improve the user experience when it comes to selecting files for upload or reordering content modules within a page.
  • When screen orientation matters for your layout, you can use CSS media queries to style your forms based on the browser orientation, or even use the Screen Orientation API to read the screen orientation state and perform other actions.

The following sections provide a set of recommendations and best practices for enabling the widest possible set of users to use your websites and applications.

Supporting common input mechanisms

Keyboard

Most users will use a keyboard to enter data into your form controls. Some will also use the keyboard to navigate to those form controls. To be accessible, and for better user experience, it's important to properly label all form controls. When each form control has a correctly associated <label>, your form will be fully accessible to all, most notably anyone navigating your form with a keyboard, a screen reader, and possibly no screen at all.

If you want to add additional keyboard support, such as validating a form control when a specific key is hit, you can use event listeners to capture and react to keyboard events. For example, if you want to add controls when any key gets pressed, you need to add an event listener on the window object:

js
window.addEventListener("keydown", handleKeyDown, true);
window.addEventListener("keyup", handleKeyUp, true);

handleKeyDown and handleKeyUp are functions defining the control logic to be executed when the keydown and keyup events are fired.

Note: Have a look at the Events reference and KeyboardEvent guide to find out more about keyboard events.

Mouse

You can also capture mouse and other pointer events. The events occurring when the user interacts with a pointing device such as a mouse are represented by the MouseEvent DOM Interface. Common mouse events include click, dblclick, mouseup, and mousedown. The list of all events using the Mouse Event Interface is provided in the Events reference.

When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag & Drop (see below). You can also use CSS to test for pointer device support.

Finger touch

To provide additional support for touchscreen devices, it's a good practice to take into consideration the different capabilities in terms of screen resolution and user input. Touch events can help you implement interactive elements and common interaction gestures on touchscreen devices.

If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:

js
element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);

where element is the DOM element you want to register the touch events on.

Note: For further information about what you can do with touch events, please read our touch events guide.

Pointer Events

Mice aren't the only pointing devices. Your user's devices may incorporate multiple forms of input, like mouse, finger touch, and pen input. Each of these pointers has a different size. The Pointer Events API may come in handy if you need to manage events across devices by normalizing the handling of each one. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device.

The events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. The PointerEvent interface provides all the details you may want to capture about the pointer device, including its size, pressure, and angle.

Implement controls

Screen Orientation

If you need slightly different layouts depending on whether the user is in portrait or landscape mode, you can use CSS media queries to define CSS for different layouts or form control widths based on the size or orientation of the screen when styling web forms.

When screen orientation matters for your form, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the Screen Orientation API.

Note: More information about the Screen Orientation API can be found in Managing screen orientation.

Fullscreen

If you need to present your form in fullscreen mode, such as when your form is displayed on a museum kiosk, toll booth, or really any publically displayed user interface, it is possible to do so by calling Element.requestFullscreen() on that element:

js
const elem = document.getElementById("myForm");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

Note: To find out more about adding fullscreen functionality to your application, read our documentation about using fullscreen mode.

Drag & Drop

A common user interaction is the physical dragging of elements to be dropped elsewhere on the screen. Drag and drop can help improve the user experience when it comes to selecting files for upload or reordering content modules within a page. There's an API for that!

The Drag & Drop API enables users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

Here is an example that allows a section of content to be dragged.

html
<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

in which we:

  • Set the draggable attribute to true on the element that you wish to make draggable.
  • Add a listener for the dragstart event and set the drag data within this listener.

Note: You can find more information in the MDN Drag & Drop documentation.

contentEditable

Generally, you should use a <textarea> or an appropriate <input> type within a <form> to collect data from users, along with a descriptive <label>. But these elements may not meet your needs. For example, rich text editors capture italic, bold, and normal text, but no native form control captures rich text. This use case requires you to create a custom control that is stylable and editable. There's an attribute for that!

Any DOM element can be made directly editable using the contenteditable attribute.

html
<div contenteditable="true">This text can be edited by the user.</div>

The contenteditable attribute automatically adds the element to the document's default tabbing order, meaning the tabindex attribute does not need to be added. However, when using non-semantic elements for data entry when creating your own form controls, you will need to add JavaScript and ARIA to retrofit the element with form control functionality for everything else.

To provide a good user experience, any custom form control you create must be accessible and function like native form controls:

Note: Examples and other resources can be found in the Content Editable guide.

Tutorials

Reference