<!DOCTYPE html>
<html>
<head>
<title>Form Elements Example</title>
</head>
<body>
<form action="/submit" method="post">
<!-- Username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<!-- Age -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100"><br><br>
<!-- Checkbox -->
<label>
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter
</label><br><br>
<!-- Radio Buttons -->
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label><br><br>
<!-- Date -->
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<!-- File Upload -->
<label for="resume">Upload your resume:</label>
<input type="file" id="resume" name="resume"><br><br>
<!-- Text Area -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>
<!-- Hidden Field -->
<input type="hidden" name="user_id" value="12345">
<!-- Range Slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100"><br><br>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.