📝 HTML Forms

Collect User Input

HTML Forms

Forms allow users to input data and submit it to a server. They're essential for login pages, contact forms, surveys, and more.

💻 Basic Form

<form action="/submit" method="POST">
    <!-- Text input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- Email input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Submit button -->
    <button type="submit">Submit</button>
</form>

🔧 Input Types

<form>
    <!-- Text -->
    <input type="text" placeholder="Enter text">
    
    <!-- Password -->
    <input type="password" placeholder="Password">
    
    <!-- Email -->
    <input type="email" placeholder="email@example.com">
    
    <!-- Number -->
    <input type="number" min="0" max="100">
    
    <!-- Date -->
    <input type="date">
    
    <!-- Checkbox -->
    <input type="checkbox" id="agree">
    <label for="agree">I agree</label>
    
    <!-- Radio buttons -->
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    
    <!-- File upload -->
    <input type="file">
    
    <!-- Color picker -->
    <input type="color">
    
    <!-- Range slider -->
    <input type="range" min="0" max="100">
</form>

🎨 Textarea and Select

<form>
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" rows="5" cols="40"></textarea>
    
    <!-- Select dropdown -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">Select...</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>
    
    <!-- Multiple select -->
    <select multiple>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>

📋 Complete Form Example

<form action="/register" method="POST">
    <h2>Registration Form</h2>
    
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           minlength="8" required>
    
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100">
    
    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    
    <label for="bio">Bio:</label>
    <textarea id="bio" name="bio" rows="4"></textarea>
    
    <input type="checkbox" id="terms" required>
    <label for="terms">I agree to terms</label>
    
    <button type="submit">Register</button>
    <button type="reset">Clear Form</button>
</form>

🎯 Key Takeaways