User input methods and controls

• 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.

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:

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.

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.

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:

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.

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.

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.

• Orientation data can be retrieved through screenOrientation.type or with CSS through the orientation media feature.
• When the screen orientation changes, the change event is fired on the screen object.
• Locking the screen orientation is made possible by invoking the ScreenOrientation.lock() method.
• The ScreenOrientation.unlock() method removes all the previous screen locks that have been set.

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 publicly displayed user interface, it is possible to do so by calling Element.requestFullscreen() on that element:

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

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.

<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.

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.

div {
  width: 300px;
  height: 130px;
  border: 1px solid gray;
}

<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:

• The element's role, label, and description need to be added with ARIA.
• All user input methods needs to be supported, including keyboard, mouse, touch, and pointer events, all described above.
• JavaScript is required to handle functionality such as validation, submission, and saving of user-updated content.

• Touch events Guide
• Managing screen orientation
• Using fullscreen mode
• Drag Operations Guide
• Form validation
• Sending forms through JavaScript

• MouseEvent interface
• KeyboardEvent interface
• Touch events API
• Pointer Lock API
• Screen Orientation API
• Fullscreen API
• Drag & Drop API
• HTML contenteditable attribute