Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <title>Form Validation</title> <style>body { font-family: Arial; padding: 20px; } input { display: block; margin: 8px 0; padding: 8px; width: 280px; } button { margin-top: 10px; padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; }</style> </head> <body> <h3>Validated Form</h3> <form> <input type="text" placeholder="Username (3–20 chars)" required minlength="3" maxlength="20"> <input type="email" placeholder="Email address" required> <input type="password" placeholder="Password (min 8)" required minlength="8"> <input type="number" placeholder="Age (18+)" min="18" max="120"> <button type="submit">Submit</button> </form> </body> </html>
Result
Open