Preview:
import React from "react";

import "./App.css";

function App() {

  const handleSubmit = (e) => {

    e.preventDefault();

    const name = e.target.name.value;

    const password = e.target.password.value;

    alert(`Name: ${name}\nPassword: ${password}`);

    e.target.reset(); // Clear form

  };

  return (

    <div className="App">

      <h2>Login Form</h2>

      <form onSubmit={handleSubmit}>

        <p>

          Name: <input type="text" name="name" placeholder="Enter name" required />

        </p>

        <p>

          Password: <input type="password" name="password" placeholder="Enter password" required />

        </p>

        <button type="submit">Submit</button>

      </form>

    </div>

  );

}

export default App;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter