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.
• TheFullscreen 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, thecontentEditable attribute enables creating editable controls from normally non-editable HTML elements.
• TheDrag 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 useCSS media queries to style your forms based on the browser orientation, or even use theScreen 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 properlylabel 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);window.addEventListener("keyup", handleKeyUp);

handleKeyDown andhandleKeyUp are functions defining the control logic to be executed when thekeydown andkeyup events are fired.

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 theMouseEvent DOM Interface. Common mouse events includeclick,dblclick,mouseup, andmousedown. The list of all events using the Mouse Event Interface is provided in theDOM events guide.

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

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

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

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. ThePointer 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. ThePointerEvent 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 useCSS media queries to define CSS for different layouts or form control widths based on the size or orientation of the screen whenstyling 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 theScreen Orientation API.

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

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

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

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!

TheDrag & 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">This text <strong>may</strong> be dragged.</div>

document.querySelector("div").addEventListener("dragstart", (event) => {  event.dataTransfer.setData("text/plain", "This text may be dragged.");});

in which we:

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

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 stylableand editable. There's an attribute for that!

Any DOM element can be made directly editable using thecontenteditable attribute.

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

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

Thecontenteditable attribute automatically adds the element to the document's default tabbing order, meaning thetabindex attribute does not need to be added. However, when using non-semantic elements for data entry whencreating your own form controls, you will need to add JavaScript andARIA 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'srole,label, anddescription need to be added with ARIA.
• All user input methods needs to be supported, includingkeyboard,mouse,touch, andpointer events, all described above.
• JavaScript is required to handle functionality such asvalidation,submission, andsaving of user-updated content.

Tutorials

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

Reference

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