<header>
  <h1>Simple Form</h1>
</header>
<main>
  <form>
    <label>
      <span>first name</span>
      <input name=" name" required />
    </label>
    <label>
      <span>email</span>
      <input name="email" type="email" required />
    </label>
    <button>submit</button>
  </form>
</main>

body {
  display: grid;
  place-content: center;
}

form,
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

form {
  max-width: 65ch;
}

input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

p {
  color: darkgreen;
}

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
  document.body.innerHTML += "<p>Form submitted</p>";
});