HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Form validation</title>

  <style>

    form { max-width: 400px; }

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

    input { width: 100%; padding: 8px; margin: 4px 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; }

    button { background: #2563eb; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }

    .hint { font-size: 0.85rem; color: #64748b; margin: -8px 0 12px; }

  </style>

</head>

<body>

  <h1>Sign up</h1>

  <form>

    <label for="username">Username</label>

    <input type="text" id="username" name="username" required pattern="[A-Za-z]{5,}" title="At least 5 letters">

    <p class="hint">At least 5 letters (A–Z)</p>



    <label for="age">Age</label>

    <input type="number" id="age" name="age" min="1" max="100" required>



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

  </form>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Form — Validation