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;
Preview:
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