Input Types (text, email, password, number)

<label for="username">Username:</label>
<input type="text" 
       id="username" 
       name="username" 
       placeholder="Enter username"
       maxlength="50"
       required>

<!-- Common attributes: --&gt;
<!-- placeholder: Hint text --&gt;
<!-- maxlength: Maximum character count --&gt;
<!-- minlength: Minimum character count --&gt;
<!-- pattern: Regex validation --&gt;
<!-- required: Field is mandatory --&gt;

<label for="email">Email:</label>
<input type="email" 
       id="email" 
       name="email" 
       placeholder="you@example.com"
       required>

<!-- Benefits: --&gt;
<!-- - Built-in email format validation --&gt;
<!-- - Mobile keyboards show @ and .com --&gt;
<!-- - Multiple emails with 'multiple' attribute --&gt;

<label for="password">Password:</label>
<input type="password" 
       id="password" 
       name="password" 
       minlength="8"
       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
       title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters"
       required>

<!-- Features: --&gt;
<!-- - Text is masked (•••) --&gt;
<!-- - Not saved in browser history --&gt;
<!-- - Autocomplete can be controlled --&gt;

<label for="phone">Phone:</label>
<input type="tel" 
       id="phone" 
       name="phone" 
       placeholder="+1 (555) 000-0000"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- Benefits: --&gt;
<!-- - Mobile keyboards show numeric keypad --&gt;
<!-- - No built-in validation (use pattern) --&gt;

<label for="website">Website:</label>
<input type="url" 
       id="website" 
       name="website" 
       placeholder="https://example.com"
       required>

<!-- Features: --&gt;
<!-- - Validates URL format --&gt;
<!-- - Mobile keyboards show .com and / --&gt;

<label for="search">Search:</label>
<input type="search" 
       id="search" 
       name="q" 
       placeholder="Search...">

<!-- Features: --&gt;
<!-- - Shows clear button (×) when typing --&gt;
<!-- - Better semantics for search --&gt;

<label for="quantity">Quantity:</label>
<input type="number" 
       id="quantity" 
       name="quantity" 
       min="1" 
       max="100" 
       step="1" 
       value="1"
       required>

<!-- Attributes: --&gt;
<!-- min: Minimum value --&gt;
<!-- max: Maximum value --&gt;
<!-- step: Increment/decrement amount --&gt;
<!-- value: Default value --&gt;

<!-- Mobile keyboard: Numeric --&gt;

<label for="volume">Volume:</label>
<input type="range" 
       id="volume" 
       name="volume" 
       min="0" 
       max="100" 
       step="5" 
       value="50">
<output for="volume" id="volume-output">50</output>

<script>
const range = document.getElementById('volume');
const output = document.getElementById('volume-output');

range.addEventListener('input', (e) => {
    output.textContent = e.target.value;
});
</script>

<label for="birthday">Birthday:</label>
<input type="date" 
       id="birthday" 
       name="birthday" 
       min="1900-01-01" 
       max="2024-12-31"
       required>

<!-- Format: YYYY-MM-DD --&gt;
<!-- Opens date picker on click --&gt;

<label for="appointment">Appointment Time:</label>
<input type="time" 
       id="appointment" 
       name="appointment" 
       min="09:00" 
       max="18:00"
       required>

<!-- Format: HH:MM (24-hour) --&gt;
<!-- Opens time picker --&gt;

<label for="meeting">Meeting:</label>
<input type="datetime-local" 
       id="meeting" 
       name="meeting"
       required>

<!-- Format: YYYY-MM-DDTHH:MM --&gt;
<!-- Date and time in one input --&gt;

<label for="credit-exp">Card Expiry:</label>
<input type="month" 
       id="credit-exp" 
       name="credit-exp"
       min="2024-01"
       required>

<!-- Format: YYYY-MM --&gt;

<label for="week">Select Week:</label>
<input type="week" 
       id="week" 
       name="week">

<!-- Format: YYYY-W## --&gt;

<input type="checkbox" 
       id="subscribe" 
       name="subscribe" 
       value="yes"
       checked>
<label for="subscribe">Subscribe to newsletter</label>

<!-- Multiple checkboxes with same name --&gt;
<fieldset>
    <legend>Interests:</legend>
    <input type="checkbox" id="html" name="interests" value="html">
    <label for="html">HTML</label>
    
    <input type="checkbox" id="css" name="interests" value="css">
    <label for="css">CSS</label>
    
    <input type="checkbox" id="js" name="interests" value="js" checked>
    <label for="js">JavaScript</label>
</fieldset>

<fieldset>
    <legend>Choose payment method:</legend>
    
    <input type="radio" id="credit" name="payment" value="credit" checked>
    <label for="credit">Credit Card</label>
    
    <input type="radio" id="debit" name="payment" value="debit">
    <label for="debit">Debit Card</label>
    
    <input type="radio" id="paypal" name="payment" value="paypal">
    <label for="paypal">PayPal</label>
</fieldset>

<!-- All radio buttons with same 'name' = only one selectable --&gt;

<label for="avatar">Choose profile picture:</label>
<input type="file" 
       id="avatar" 
       name="avatar" 
       accept="image/png, image/jpeg"
       required>

<!-- Multiple files --&gt;
<label for="photos">Upload photos:</label>
<input type="file" 
       id="photos" 
       name="photos" 
       accept="image/*"
       multiple>

<!-- accept attribute: --&gt;
<!-- image/* - All images --&gt;
<!-- image/png, image/jpeg - Specific types --&gt;
<!-- .pdf, .doc - File extensions --&gt;
<!-- audio/*, video/* - Audio/video files --&gt;

<label for="favcolor">Favorite Color:</label>
<input type="color" 
       id="favcolor" 
       name="favcolor" 
       value="#ff0000">

<!-- Value must be in hex format (#RRGGBB) --&gt;
<!-- Opens color picker --&gt;

<input type="submit" value="Submit Form">
<!-- Or --&gt;
<button type="submit">Submit Form</button>

<!-- Submits the form --&gt;

<input type="button" value="Click Me" onclick="doSomething()">
<!-- Or --&gt;
<button type="button" onclick="doSomething()">Click Me</button>

<!-- Does nothing by default (use JavaScript) --&gt;

<input type="reset" value="Clear Form">
<!-- Or --&gt;
<button type="reset">Clear Form</button>

<!-- Resets all form fields to default values --&gt;

<input type="image" 
       src="submit-button.png" 
       alt="Submit" 
       width="100" 
       height="40">

<!-- Acts as submit button --&gt;
<!-- Sends x,y coordinates of click --&gt;

<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="csrf_token" value="abc123xyz">

<!-- Not visible to user --&gt;
<!-- Submitted with form --&gt;
<!-- Use for: IDs, tokens, tracking data --&gt;

<input type="text" 
       required                    <!-- Field must be filled --&gt;
       minlength="3"               <!-- Minimum length --&gt;
       maxlength="50"              <!-- Maximum length --&gt;
       pattern="[A-Za-z]{3,}"      <!-- Regex pattern --&gt;
       title="Username must be at least 3 letters">  <!-- Tooltip --&gt;

<input type="text" 
       placeholder="Enter text..."     <!-- Hint text --&gt;
       value="Default value"           <!-- Initial value --&gt;
       disabled                        <!-- Cannot interact --&gt;
       readonly                        <!-- Cannot edit --&gt;
       autofocus                       <!-- Focus on page load --&gt;
       autocomplete="name"             <!-- Autocomplete hint --&gt;
       spellcheck="true">              <!-- Enable spellcheck --&gt;