HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>HTML Form Example</title>

  <style>

    form { max-width: 420px; }

    label { display: block; font-weight: 600; margin-top: 8px; }

    input, textarea { width: 100%; padding: 10px; margin: 4px 0 14px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }

    button { background: #2563eb; color: #fff; border: none; padding: 10px 24px; border-radius: 6px; cursor: pointer; font-size: 1rem; }

    #status { margin-top: 12px; color: #059669; font-weight: 600; display: none; }

  </style>

</head>

<body>

  <h1>Contact Us</h1>

  <form id="contactForm" action="/submit" method="post">

    <label for="name">Name</label>

    <input type="text" id="name" name="name" required>



    <label for="email">Email</label>

    <input type="email" id="email" name="email" required>



    <label for="message">Message</label>

    <textarea id="message" name="message" rows="5" required></textarea>



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

  </form>

  <p id="status">Form submitted successfully!</p>



  <script>

    document.getElementById("contactForm").addEventListener("submit", function (event) {

      event.preventDefault();

      const data = new FormData(this);

      console.log("Name:", data.get("name"));

      console.log("Email:", data.get("email"));

      document.getElementById("status").style.display = "block";

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Form — Complete Example