In this article, we will learn how to create a form in React.js. The form is created using JSX element. We will be using functional component to render the elements. Various HTML elements are created in the project. To implement the project we will create the styling using CSS.
Let us have a look at how the final project will look like:
Prerequisites: The pre-requisites for this project are:
- HTML and CSS
- Beginner-level knowledge of React.js
- Functional Components
- JavaScript ES6
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app react-app
Step 2: After creating your project folder i.e. react-app, move to it using the following command:
cd react-app
Project Structure: It will look like the following:
Steps to Run Application:
Step 1: Run the application using the following command from the root directory of the project:
npm start
Step 2: Type the following link in your browser
http://localhost:3000/
Example: Write the following code in the respective files
- App.js: This file contains the form element along with its structure
- App.css: This file contains the styling of the application
Javascript
// App.js import "./App.css"; function App() { return ( <div className="App"> <h1>Form in React</h1> <fieldset> <form action="#" method="get"> <label for="firstname">First Name*</label> <input type="text" name="firstname" id="firstname" placeholder="Enter First Name" required /> <br /><br /> <label for="lastname">Last Name*</label> <input type="text" name="lastname" id="lastname" placeholder="Enter Last Name" required /> <br /><br /> <label for="email">Enter Email* </label> <input type="email" name="email" id="email" placeholder="Enter email" required /> <br /><br /> <label for="tel">Contact*</label> <input type="tel" name="tel" id="tel" placeholder="Enter Mobile number" required /> <br /><br /> <label for="gender">Gender*</label> <br /> <input type="radio" name="gender" value="" id="male" /> Male <input type="radio" name="gender" value="" id="female" /> Female <input type="radio" name="gender" value="" id="other" /> Other <br /><br /> <label for="lang">Your best Subject</label> <br /> <input type="checkbox" name="lang" id="english" checked /> English <input type="checkbox" name="lang" id="maths" /> Maths <input type="checkbox" name="lang" id="physics" /> Physics <br /><br /> <label for="file">Upload Resume*</label> <input type="file" name="file" id="file" placeholder="Enter Upload File" required /> <br /><br /> <label for="url">Enter URL*</label> <input type="url" name="url" id="url" placeholder="Enter url" required /> <br /><br /> <label>Select your choice</label> <select name="select" id="select"> <option value="" disabled selected> Select your Ans </option> <optgroup label="Beginers"> <option value="1">HTML</option> <option value="2">CSS</option> <option value="3">JavaScript</option> </optgroup> <optgroup label="Advance"> <option value="1">React</option> <option value="2">Node</option> <option value="3">Express</option> <option value="4">MongoDB</option> </optgroup> </select> <br /><br /> <label for="about">About</label> <br /> <textarea name="about" id="about" cols="30" rows="10" placeholder="About your self" required ></textarea> <br /><br /> <label>Submit OR Reset</label> <br /> <button type="reset" value="reset"> Reset </button> <button type="submit" value="Submit"> Submit </button> </form> </fieldset> </div> ); } export default App; |
CSS
/* App.css */ body { background-color: azure; color:#fff; } h1 { text-align: center; color: black; } fieldset { margin-left: 20%; margin-right: 20%; background-color: rgb(23, 49, 41); } input { padding: .3rem; border: 1px solid #ccc; border-radius: 4px; margin: 10px; } label { margin: 10px; } button { padding: .3rem; font-size: 15px; background-color: rgb(9, 17, 6); border: 4px solid #ccc; color: #ccc; padding: 10px; border-radius: 8px; margin: 10px; cursor: pointer; } |
Output:
