This project demonstrates various methods for handling form inputs in a React application. It includes examples of using useState, refs, and the native FormData API to manage and validate form data.
- useState: Utilizes the
useStatehook to manage form state and handle data within theonSubmitfunction. - Refs: Uses refs to directly access DOM elements and retrieve their values.
- FormData API: Employs the native
FormDataAPI provided by the browser to collect form data.
- useState: Set the
onChangeprop on inputs to update the state, and handle all data inside theonSubmitfunction. - Refs: Use
refName.current.valueto get the input values. - FormData API: Ensure all input fields have the
nameprop set. For nested or grouped inputs like checkboxes, usefd.getAll()and combine it with the rest of the object attributes.
To run this project locally, follow these steps:
- Clone this repository to your local machine:
git clone https://github.com/trishna456/forms.git- Navigate to the project directory:
cd forms- Install dependencies using npm or yarn:
npm install
# or
yarn install- Start the development server:
npm start
# or
yarn start- Open your web browser and navigate to http://localhost:3000 to view the project.