How to add border to form in react js?

April 13, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add border to form in react js, you can set border: 2px solid #000; in .border-form. It will add border to form in react js.

Today, I am going to show you, how to add border to form in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React, { useState } from 'react';
import "./App.css";

Step 3: Create a Component.

you can use border: 2px solid #000; and add border to form in react js.

<div className="border-form">
  <h3>aHoisting</h3>
    <form onSubmit={handleSubmit}>
      <label>Name: <input type="text" name="name" value={formData.name} onChange={handleChange} /></label>
      <label>Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /></label>
    <button type="submit">Submit</button>
  </form>
</div>

Define the add border to form example.

The below code is an example of a React. You have to import React and use border: 2px solid #000; to add border to form in react js.

App.js

import React, { useState } from 'react';
import "./App.css";

function AddForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <div className="border-form">
      <h3>aHoisting</h3>
    <form onSubmit={handleSubmit}>
      <label>Name: <input type="text" name="name" value={formData.name} onChange={handleChange} /></label>
      <label>Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /></label>
      <button type="submit">Submit</button>
    </form>
    </div>
  );
}

export default AddForm;

App.css

.border-form {
  border: 2px solid #000;
  margin: 30px;
  padding: 20px; 
}

In the above code example, I have used the border: 2px solid #000; css and add border to form in react js.

Check the output of the above code example.

All the best 👍