HTML Input Types

🔠 HTML Input Types Overview

HTML <input> elements support various types to handle different kinds of user input. Using the right input type improves form usability, accessibility, and data accuracy.

---

🔡 Common HTML Input Types

1. Text (type="text")

   • Default input type.
   • Accepts plain text.
   • Example use: Name, username, general input.

2. Password (type="password")

   • Hides typed characters using dots or asterisks.
   • Used for login forms or sensitive input.

3. Email (type="email")

   • Requires a valid email format.
   • Shows email keyboard on mobile devices.

4. Number (type="number")

   • Accepts numeric values only.
   • Supports min, max, and step attributes.

5. Date (type="date")

   • Provides a calendar UI for picking dates.
   • Ensures valid date format.

6. Checkbox (type="checkbox")

   • Select one or multiple independent options.

7. Radio (type="radio")

   • Select a single option from a group (same name).

8. File (type="file")

   • Allows file upload.
   • Use multiple to select more than one file.
   • Restrict formats with accept=".pdf,.docx".

9. URL (type="url")

   • Accepts only well-formed URLs.
   • Good for website or blog links.

10. Tel (type="tel")

    • Accepts phone numbers.
    • Triggers numeric keypad on mobile.

11. Submit (type="submit")

    • Submits the form to the server.

12. Reset (type="reset")

    • Resets all fields to their initial values.

---

🧪 Example: Form with Multiple Input Types

---

✅ Key Takeaway

• Use the correct type to enhance form usability and mobile optimization.
• Input types trigger appropriate keyboards/UI on different devices.
• Built-in validation with types like email, url, number saves time.
• Pair input types with attributes (required, min, max, accept) for better data quality.
• Improved UX and accessibility with minimal code.