HTML Forms Advanced Concepts

<!-- Shows a Color Picker -->
<input type="color" name="favcolor">

<!-- Shows a calendar Date Picker -->
<input type="date" name="birthday">

<!-- Shows an interactive slider -->
<input type="range" name="volume" min="0" max="100">

<!-- Shows a specialized email keyboard on mobile -->
<input type="email" name="user_email">

<input type="text" required minlength="5" maxlength="20">

<!-- Must be a number between 1 and 10 -->
<input type="number" min="1" max="10">

<!-- Forces the user to type exactly 3 letters followed by 3 numbers -->
<input type="text" pattern="[A-Za-z]{3}[0-9]{3}" title="Three letters, three numbers.">

<form action="/submit" method="POST">
    <fieldset>
        <legend>Account Details</legend>
        
        <label>Email:</label>
        <input type="email" required placeholder="you@example.com"><br><br>
        
        <label>Password (Min 8 chars, 1 number):</label>
        <input type="password" required pattern="(?=.*\d).{8,}" title="Must contain at least one number and be 8+ characters"><br><br>
        
        <label>Profile Theme Color:</label>
        <input type="color" value="#ff0000"><br><br>
        
        <label>Account Tier (1-3):</label>
        <input type="range" min="1" max="3" value="1"><br><br>
        
        <button type="submit">Register</button>
    </fieldset>
</form>