In this tutorial, we'll explore the process of creating a form using React.js. The form will be constructed using JSX elements, and we'll utilize a functional component to render these elements. Various HTML elements will be generated within the project. To implement the project, we'll apply styling using CSS.
Now, let's take a glimpse of the envisioned final project:
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
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;
Output:
Top comments (0)