How To Use Ant Forms in Your Web App

Ant forms facilitate managing web form’s style, layout, validation, and data

Photo by Christina @ wocintechchat.com on Unsplash

A web form allows us to enter data that is sent to a server for processing. For example, a form can be used to enter the shipping address and credit card information when we order a product. A form is enclosed in the HTML <form> element. It contains text fields, selects, checkboxes, radio buttons, and etc.

A form is a complicated element/component in HTML/React. In a previous article, we explained another aspect of the form: how form autofill works.

In this article, we are going to explore how Ant forms facilitate managing form’s style, layout, validation, and data.

Why Do We Need an Ant Form?

An Ant form is part of the Ant Design System, and we set it up in the Create React App working environment using the following command:

npx create-react-app my-app
cd my-app

To set up antd, do this:

npm i antd

antd becomes part of dependencies in package.json:

Throughout this article, we modify src/App.js to explore things. Here is a simple form:

It displays two input fields and one submit button:

This output has a number of issues:

• The components are not aesthetically pleasing.
• There are no labels to identify input fields.
• The components are not laid out nicely.
• There is no validation for fields.
• The input field data are not controlled.
• When the submit button is clicked…