Contact form with built-in validation

Labels, input types and constraints that browsers validate for free.

html beginner #forms#validation#accessibility
Abrir no playground
html-form-validation.html
<form action="/contact" method="post" novalidate>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <label for="msg">Message</label>
  <textarea id="msg" name="message" required minlength="10" maxlength="2000"></textarea>

  <!-- honeypot: hidden from people, bots fill it -->
  <input type="text" name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">

  <button type="submit">Send</button>
</form>
<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    if (!e.target.checkValidity()) { e.preventDefault(); e.target.reportValidity(); }
  });
</script>