Input types supported by Html - all types of input

1. HTML provides a variety of input types to allow users to input data in different formats. Below is a detailed explanation of all input types:

2. Text (type="text")

   1. Allows users to input a single line of text.
   2. Example: <input type="text" placeholder="Enter your name">

3. Password (type="password")

   1. Masks the input characters with dots or asterisks for security.
   2. Example: <input type="password" placeholder="Enter your password">

4. Email (type="email")

   1. Validates that the input is in a valid email format.
   2. Example: <input type="email" placeholder="Enter your email">

5. Number (type="number")

   1. Accepts numeric input. Includes options for setting min, max, and step attributes.
   2. Example: <input type="number" min="1" max="100">

6. Tel (type="tel")

   1. Accepts phone numbers but does not enforce any specific format.
   2. Example: <input type="tel" placeholder="Enter your phone number">

7. URL (type="url")

   1. Ensures the input is a valid URL format.
   2. Example: <input type="url" placeholder="Enter website URL">

8. Date (type="date")

   1. Provides a date picker to select a date.
   2. Example: <input type="date">

9. Time (type="time")

   1. Allows users to select a time.
   2. Example: <input type="time">

10. Color (type="color")

    1. Displays a color picker.
    2. Example: <input type="color">

11. Checkbox (type="checkbox")

    1. Enables the selection of multiple options.
    2. Example: <input type="checkbox" value="Agree">

12. Radio (type="radio")

    1. Allows selection of a single option from a group.

    2. Example:

       <input type="radio" name="gender" value="Male"> Male
       <input type="radio" name="gender" value="Female"> Female
       

13. File (type="file")

    1. Lets users upload files.
    2. Example: <input type="file">

14. Range (type="range")

    1. Provides a slider for selecting a value within a range.
    2. Example: <input type="range" min="0" max="10">

15. Search (type="search")

    1. Similar to a text input but designed for search queries.
    2. Example: <input type="search" placeholder="Search...">

16. Hidden (type="hidden")

    1. Stores data in the form but is not visible to users.
    2. Example: <input type="hidden" value="12345">

17. Button (type="button")

    1. Creates a clickable button.
    2. Example: <input type="button" value="Click Me">

18. Submit (type="submit")

    1. Submits the form data to the server.
    2. Example: <input type="submit" value="Submit">

19. Reset (type="reset")

    1. Resets all form inputs to their initial values.
    2. Example: <input type="reset" value="Reset">

20. Month (type="month")

    1. Allows users to select a month and year.
    2. Example: <input type="month">

21. Week (type="week")

    1. Allows selection of a specific week of the year.
    2. Example: <input type="week">

22. Datetime-Local (type="datetime-local")

    1. Provides both date and time input without time zone support.
    2. Example: <input type="datetime-local">

23. Image (type="image")

    1. Displays an image as a submit button.
    2. Example: <input type="image" src="submit.png" alt="Submit">

CSS selectors and types.

1. CSS selectors are patterns used to select elements for styling. Below are the types of CSS selectors:
2. Universal Selector (*)
   1. Selects all elements.
   2. Example: { margin: 0; padding: 0; }
3. Type Selector (Element Selector)
   1. Selects all elements of a specific type.
   2. Example: p { color: blue; }
4. Class Selector (.classname)
   1. Selects elements with a specific class.
   2. Example: .box { border: 1px solid black; }
5. ID Selector (#id)
6. Group Selector (A, B)
7. Descendant Selector (Space)
8. Child Selector (>)
9. Adjacent Sibling Selector (+)
10. General Sibling Selector (~)
11. Attribute Selector ([attribute])
12. Pseudo-Classes (:pseudo-class)
13. Pseudo-Elements (::pseudo-element)

Types of CSS

JAVASCRIPT

PHP