Gopal

23 HTML Input tags That exist

Gopal N D's photo
Gopal N D
·

3 min read

1. Button

  • Description: Creates a clickable button.

  • Example:

      <input type="button" value="Click Me">

2. Checkbox

  • Description: Creates a checkbox for binary selection (checked/unchecked).

  • Example:

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

3. Color

  • Description: Opens a color picker.

  • Example:

      <input type="color" name="favcolor" value="#ff0000">

4. Date

  • Description: Allows the selection of a date.

  • Example:

      <input type="date" name="birthdate">

5. Datetime-local

  • Description: Allows the selection of a date and time (local time).

  • Example:

      <input type="datetime-local" name="appointment">

6. Email

  • Description: For email input; validates the format of the email.

  • Example:

      <input type="email" name="email" placeholder="example@example.com">

7. File

  • Description: Allows file upload.

  • Example:

      <input type="file" name="upload">

8. Hidden

  • Description: Hidden input field, not visible to users.

  • Example:

      <input type="hidden" name="userid" value="12345">

9. Image

  • Description: Submit button as an image.

  • Example:

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

10. Month

  • Description: Allows the selection of a month and year.

  • Example:

      <input type="month" name="startMonth">

11. Number

  • Description: Input field for numeric values; allows setting min/max and step.

  • Example:

      <input type="number" name="quantity" min="1" max="10">

12. Password

  • Description: Input for passwords; masks input characters.

  • Example:

      <input type="password" name="password">

13. Radio

  • Description: For mutually exclusive selection; used in groups.

  • Example:

      <input type="radio" id="option1" name="choice" value="1">
  <label for="option1">Option 1</label>
  <input type="radio" id="option2" name="choice" value="2">
  <label for="option2">Option 2</label>

14. Range

  • Description: Input slider for numeric ranges.

  • Example:

      <input type="range" name="volume" min="0" max="100">

15. Reset

  • Description: Resets form fields to their default values.

  • Example:

      <input type="reset" value="Reset Form">

  • Description: Input for search terms.

  • Example:

      <input type="search" name="query" placeholder="Search here">

17. Submit

  • Description: Submit button to send form data.

  • Example:

      <input type="submit" value="Submit">

18. Tel

  • Description: For telephone numbers; no specific validation.

  • Example:

      <input type="tel" name="phone" placeholder="123-456-7890">

19. Text

  • Description: Basic text input field.

  • Example:

      <input type="text" name="username" placeholder="Enter your name">

20. Time

  • Description: Allows the selection of a time.

  • Example:

      <input type="time" name="appointmentTime">

21. URL

  • Description: For URLs; validates proper format.

  • Example:

      <input type="url" name="homepage" placeholder="https://example.com">

22. Week

  • Description: Allows the selection of a week and year.

  • Example:

      <input type="week" name="week">

23. Select

<select name="dropdown" id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
ChaiCodeChaiaurcode