Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <title>Input Types</title> <style>body { font-family: Arial; padding: 20px; } div { margin: 10px 0; } label { display: inline-block; width: 120px; }</style> </head> <body> <h3>Input Type Demos</h3> <div><label>Text:</label> <input type="text" placeholder="Your name"></div> <div><label>Email:</label> <input type="email" placeholder="email@example.com"></div> <div><label>Password:</label> <input type="password" placeholder="••••••"></div> <div><label>Number:</label> <input type="number" min="1" max="10"></div> <div><label>Date:</label> <input type="date"></div> <div><label>Color:</label> <input type="color" value="#6366f1"></div> <div><label>Range:</label> <input type="range" min="0" max="100"></div> </body> </html>
Result
Open