- July 1, 2020

Photo by Liane Metzler

What are forms? Why are they used? How can a form be useful for the user and the recipient?

In real life, you fill forms to submit requests, to place orders, to provide required information, and so on.

Forms allow users to interact with the database

A form is efficient because the data received from a form has a predefined and predictable structure. This enables parsing and automatic treatment of the submitted data. The information is structured into named properties. The data still needs to be validated, client-side and/or server-side. The data is ready for being pushed into a database.

Websites and apps use forms. A contact form requires the user to provide his name, his email and the subject of the email. In a sense, it requires the user to provide more data than usual. In other situations, form can require the user to provide less data than usual, by focusing only on the most important piece of information, while denying any additional or superfluous information.

Forms in PWA

In a Progressive Web App, the whole application is loaded once and for all on the first page load. The server won't have work to do anymore, as the application can handle all the events and the network calls by itself. As such, a Progressive Web App doesn't need and doesn't want any page reload or page change, as a page reload would lead to the App restart.

By default, submitting a HTML form triggers a HTTP POST request, providing the submitted data to the server. The browser then loads a new page provided by the server. This behaviour was designed when all the logic was handled by the server.

In a PWA, the form default behaviour is blocked. The app might still upload the data to a server, but this upload is made on the background and asynchronously. As such, the upload is non-blocking and doesn't trigger unnecessary reload.

Forms in React

In React, the form inputs are either controlled or uncontrolled. Controlled inputs have their value stored individually in the state and need to be managed. Uncontrolled inputs are not managed and are a standard DOM element. Both solutions are not ideal and involve some boilerplate code. Using React-Hook-Form reduces the boilerplate and removes unnecessary renders by using uncontrolled components.

Text inputs and Specific inputs

Text inputs are straightforward and can receive unformatted text values.

Date inputs expect correctly formatted date values. Date values are a pain to collect because date formats are different from one country to another, and because browsers do not provide a good interface to collect dates. The simplest way to collect a date is to request the individual components of a date: Year, Month and Day.

Select inputs provide a list of possible choices. They offer discoverability of the different choices, but the interface is not ideal when the list is big. The user can speed-up the process by typing the first letter of what he's looking for.