HTML Input Element:

In HTML, the input field can be specified using where a user can enter data. The input tag is used within < form> element to declare input controls that allow users to input data. An input field can be of various types depending upon the attribute type.


<input type = "value" .... />

Here is a list of commonly used input types in HTML:

  1. Text Input (type="text"): Used for single-line text input, such as names, emails, and messages.

  2. Password Input (type="password"): Conceals the user's input, showing asterisks or dots instead of the actual characters.

  3. Checkbox (type="checkbox"): Allows users to select multiple options from a list of choices.

  4. Radio Button (type="radio"): Provides a list of options where only one option can be selected at a time.

  5. Submit Button (type="submit"): Triggers the form submission when clicked.

  6. Reset Button (type="reset"): Resets the form data to its default values.

  7. Button (type="button"): A generic button used for triggering JavaScript functions or custom actions.

  8. File Upload (type="file"): Enables users to select and upload files from their local device.

  9. Number Input (type="number"): Restricts input to numeric values, with optional min and max attributes to define a range.

  10. Date Input (type="date"): Allows users to select a date from a date picker interface.

  11. Time Input (type="time"): Provides a time picker interface for selecting time values.

  12. Color Input (type="color"): Displays a color picker, allowing users to choose a color.

  13. Range Input (type="range"): Offers a slider to select a value within a specified range.

  14. Email Input (type="email"): Used for collecting email addresses and includes built-in email validation.

  15. URL Input (type="url"): Used for collecting website URLs and includes built-in URL validation.

  16. Tel Input (type="tel"): Designed for collecting telephone numbers and supports input masking.

  17. Search Input (type="search"): Styled for search input fields, with a clear button to reset the search query.

  18. Hidden Input (type="hidden"): A hidden input used to store data that is not visible to users.

    The “type” attribute of the input element can be of various types as described above.

    For example, if we want to make an input type text then We will write,

    <input type="text" placeholder="sample text">

    Attributes used in Code:

    The placeholder attribute specifies a short hint that describes the expected value of an input field