HTML Input Types

HTML provides a wide variety of input types for collecting and validating user data in forms. These input types are used within the <input> element to define the data format.

Common HTML Input Types

1. text

Used for single-line text input.

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

Output: A text box for inputting a name.

2. password

Masks the input characters for sensitive information.

<input type="password" name="password" placeholder="Enter your password">

Output: A password input field with obscured characters.

3. email

Validates input for email addresses.

<input type="email" name="email" placeholder="Enter your email">

Output: A field requiring an email format (e.g., [email protected]).

4. number

Accepts numeric input with optional restrictions.

<input type="number" name="age" min="1" max="100" placeholder="Enter your age">

Output: A numeric input field with specified range limits.

5. tel

Used for telephone number inputs.

<input type="tel" name="phone" placeholder="Enter your phone number">

Output: A field for phone numbers without automatic validation.

6. url

Validates input as a URL.

<input type="url" name="website" placeholder="Enter your website URL">

Output: A field requiring a valid URL format (e.g., https://example.com).

7. date

Allows users to select a date from a calendar.

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

Output: A date picker.

8. time

Accepts time values in HH:MM format.

<input type="time" name="meeting-time">

Output: A time picker.

9. file

Enables file selection for upload.

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

Output: A file upload field.

10. radio

Presents a group of options, allowing only one selection.

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

Output: Radio buttons for gender selection.

11. checkbox

Allows multiple selections from a group.

<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports

Output: Checkboxes for hobbies.

12. range

Accepts numeric input via a slider.

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

Output: A slider for selecting a value within a range.

13. color

Provides a color picker.

<input type="color" name="favcolor">

Output: A color selection field.

14. search

Optimized for search inputs.

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

Output: A search box with optional clear functionality.

 

Summary

HTML input types provide various ways to collect and validate user data. Choosing the appropriate input type ensures better user experience and accurate data collection. Common types include text, email, password, file, and date.