index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comprehensive Input Types</title>
<style>
.form-row { margin-bottom: 12px; }
label { display: inline-block; width: 140px; font-weight: 600; }
input { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; }
</style>
</head>
<body>
<h2>HTML5 Input Types Gallery</h2>
<form>
<div class="form-row">
<label for="userName">Text:</label>
<input type="text" id="userName" name="username">
</div>
<div class="form-row">
<label for="userPwd">Password:</label>
<input type="password" id="userPwd" name="password">
</div>
<div class="form-row">
<label for="userEmail">Email:</label>
<input type="email" id="userEmail" name="email">
</div>
<div class="form-row">
<label for="userAge">Number (1-100):</label>
<input type="number" id="userAge" name="age" min="1" max="100">
</div>
<div class="form-row">
<label for="userDate">Date Picker:</label>
<input type="date" id="userDate" name="birth_date">
</div>
<div class="form-row">
<label for="userColor">Color Picker:</label>
<input type="color" id="userColor" name="favorite_color" value="#2563eb">
</div>
<div class="form-row">
<label for="userVolume">Range Slider:</label>
<input type="range" id="userVolume" name="volume" min="0" max="100" value="50">
</div>
<div class="form-row">
<label for="userAvatar">File Upload:</label>
<input type="file" id="userAvatar" name="avatar" accept="image/*">
</div>
</form>
</body>
</html>