HTML provides different input types for collecting different kinds of information such as text, email addresses, passwords, numbers, dates, files, colors, and selections.

1. What are HTML Input Types?

The <input> element changes its behavior based on the value of its type attribute.

<input type="text">

For example, changing type="text" to type="email" creates an email-oriented input.

<input type="email">

2. Common HTML Input Types

Input Type	Purpose
`text`	Single-line text input.
`password`	Password entry.
`email`	Email address input.
`number`	Numeric input.
`tel`	Telephone number input.
`url`	Web address input.
`search`	Search input.
`date`	Date selection.
`time`	Time selection.
`datetime-local`	Local date and time selection.
`month`	Month and year selection.
`week`	Week and year selection.
`color`	Color selection.
`file`	File selection.
`checkbox`	Multiple independent selections.
`radio`	Single selection from a group.
`range`	Select a value from a range.
`hidden`	Stores a value that is not visibly displayed.
`submit`	Submits the form.
`reset`	Resets form controls.
`button`	Creates a general-purpose button.

3. Text Input

The text input is used for single-line text.

<label for="username">
    Username:
</label>

<input type="text"
       id="username"
       name="username">

Username:

4. Password Input

The password input masks the entered characters.

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

5. Email Input

The email input is designed for email addresses and provides browser-level validation hints.

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

6. Number Input

The number input is intended for numeric values.

<input type="number"
       name="age">

Using min and max

<input type="number"
       name="age"
       min="18"
       max="60">

Age:

7. Telephone Input

The tel input is intended for telephone numbers.

<label for="phone">
    Phone:
</label>

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

8. URL Input

The url input is intended for web addresses.

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

9. Search Input

The search input is used for search queries.

<form action="/search"
      method="get">

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

    <button type="submit">
        Search
    </button>

</form>

10. Date Input

The date input allows users to select a date.

<label for="dob">
    Date of Birth:
</label>

<input type="date"
       id="dob"
       name="dob">

Date:

11. Time Input

The time input allows the user to select a time.

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

12. datetime-local Input

The datetime-local input allows the user to select a local date and time.

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

13. Month Input

The month input is used to select a month and year.

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

14. Week Input

The week input allows selection of a week and year.

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

15. Color Input

The color input provides a color selection control in supporting browsers.

<label for="color">
    Select Color:
</label>

<input type="color"
       id="color"
       name="color"
       value="#0d6efd">

Select Color:

16. File Input

The file input allows the user to select a file.

<label for="resume">
    Upload Resume:
</label>

<input type="file"
       id="resume"
       name="resume">

Accept Specific File Types

<input type="file"
       name="resume"
       accept=".pdf,.doc,.docx">

Note: The accept attribute provides a hint about allowed file types. The server should still validate uploaded files.

17. Checkbox Input

A checkbox represents an independent selection and can be used when multiple options may be selected.

<input type="checkbox"
       id="html"
       name="skills"
       value="html">

<label for="html">
    HTML
</label>

18. Radio Input

Radio buttons are used when the user should select one option from a group.

<input type="radio"
       id="online"
       name="mode"
       value="online">

<label for="online">
    Online
</label>

<input type="radio"
       id="offline"
       name="mode"
       value="offline">

<label for="offline">
    Offline
</label>

Important: Radio buttons in the same group should normally use the same name value.

19. range Input

The range input lets the user select a value from a defined range.

<label for="volume">
    Volume:
</label>

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

Volume:

20. hidden Input

The hidden input stores a value that is not displayed as a visible form control.

<input type="hidden"
       name="studentId"
       value="101">

Important: A hidden field is not a security mechanism. Do not trust hidden values without validating them on the server.

21. submit Input

The submit input creates a form submission button.

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

22. reset Input

The reset input creates a button that restores form controls to their initial values.

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

23. button Input

The button input creates a general-purpose button that does not submit the form by default.

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

24. Input Size

CSS can be used to control the visual width of input controls.

<input type="text"
       name="username"
       style="width:300px;">

25. maxlength

The maxlength attribute limits the maximum number of characters that can be entered into supported text controls.

<input type="text"
       name="username"
       maxlength="20">

26. minlength

The minlength attribute specifies the minimum number of characters required.

<input type="text"
       name="username"
       minlength="5"
       required>

27. min and max

The min and max attributes define minimum and maximum permitted values for supported controls.

<input type="number"
       name="age"
       min="18"
       max="60">

28. step Attribute

The step attribute defines the allowed step interval for supported numeric controls.

<input type="number"
       name="price"
       min="0"
       max="1000"
       step="0.5">

29. pattern Attribute

The pattern attribute can specify a regular expression pattern for supported text controls.

<input type="text"
       name="studentCode"
       pattern="[A-Z]{3}[0-9]{3}"
       required>

Example: The pattern above expects three uppercase letters followed by three digits.

30. required Attribute with Input Types

The required attribute can be used with many input types.

<input type="text"
       name="name"
       required>

<input type="email"
       name="email"
       required>

<input type="date"
       name="dob"
       required>

<input type="file"
       name="resume"
       required>

31. autocomplete Attribute

The autocomplete attribute provides hints to the browser about previously entered information.

<input type="text"
       name="fullName"
       autocomplete="name">

<input type="email"
       name="email"
       autocomplete="email">

32. disabled Input

A disabled input cannot be interacted with by the user.

<input type="text"
       value="Not Available"
       disabled>

33. readonly Input

A readonly input cannot be edited by the user but can remain available for normal form processing.

<input type="text"
       name="studentId"
       value="STU101"
       readonly>

34. checked Attribute

The checked attribute can mark a checkbox or radio button as selected initially.

<input type="checkbox"
       name="skills"
       value="html"
       checked>

<label>
    HTML
</label>

35. selected Option

A default option can be selected in a dropdown.

<select name="course">

    <option value="html">
        HTML
    </option>

    <option value="css"
            selected>
        CSS
    </option>

    <option value="javascript">
        JavaScript
    </option>

</select>

36. Input Types in a Student Form

<form>

    <label>
        Name:
    </label>

    <input type="text"
           name="name">

    <br><br>

    <label>
        Email:
    </label>

    <input type="email"
           name="email">

    <br><br>

    <label>
        Phone:
    </label>

    <input type="tel"
           name="phone">

    <br><br>

    <label>
        Age:
    </label>

    <input type="number"
           name="age"
           min="18"
           max="60">

    <br><br>

    <label>
        Date of Birth:
    </label>

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

    <br><br>

    <label>
        Resume:
    </label>

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

    <br><br>

    <button type="submit">
        Submit
    </button>

</form>

37. Practical Comparison of Input Types

Type	Example Use
`text`	Name, city, username
`email`	Email address
`password`	Password
`number`	Age, quantity, price
`tel`	Phone number
`url`	Website URL
`search`	Search query
`date`	Date of birth
`time`	Appointment time
`file`	Resume or document
`color`	Theme or color selection
`range`	Volume or rating
`hidden`	Non-visible form value

38. Accessibility Best Practices

Use a meaningful label for each important control.
Match label for with input id.
Use suitable input types for the expected data.
Do not depend only on placeholder text.
Group related radio buttons and checkboxes logically.
Provide useful validation feedback.

39. Common Mistakes

Using text for every kind of data.
Forgetting the correct name attribute.
Using the wrong input type for the expected value.
Using placeholders instead of labels.
Forgetting validation constraints where necessary.
Using hidden inputs as if they were secure storage.
Forgetting server-side validation of submitted data.

40. Best Practices

Choose the most appropriate input type.
Use semantic labels and meaningful names.
Use built-in browser validation where appropriate.
Use suitable constraints such as min, max, and required.
Use file input restrictions only as a client-side hint.
Always validate important data on the server.

41. Practice Task

Create a registration form using these input types:

Text
Email
Password
Number
Telephone
URL
Date
Time
Radio
Checkbox
Color
File
Range
Submit
Reset

42. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>HTML Input Types Example</title>

</head>

<body>

    <h1>Student Registration</h1>

    <form action="/register"
          method="post"
          enctype="multipart/form-data">

        <label for="name">
            Full Name:
        </label>

        <input type="text"
               id="name"
               name="name"
               required>

        <br><br>

        <label for="email">
            Email:
        </label>

        <input type="email"
               id="email"
               name="email"
               required>

        <br><br>

        <label for="password">
            Password:
        </label>

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

        <br><br>

        <label for="age">
            Age:
        </label>

        <input type="number"
               id="age"
               name="age"
               min="18"
               max="60">

        <br><br>

        <label for="phone">
            Phone:
        </label>

        <input type="tel"
               id="phone"
               name="phone">

        <br><br>

        <label for="website">
            Website:
        </label>

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

        <br><br>

        <label for="dob">
            Date of Birth:
        </label>

        <input type="date"
               id="dob"
               name="dob">

        <br><br>

        <label>
            Learning Mode:
        </label>

        <input type="radio"
               id="online"
               name="mode"
               value="online">

        <label for="online">
            Online
        </label>

        <input type="radio"
               id="offline"
               name="mode"
               value="offline">

        <label for="offline">
            Offline
        </label>

        <br><br>

        <label>
            Skills:
        </label>

        <input type="checkbox"
               id="html"
               name="skills"
               value="html">

        <label for="html">
            HTML
        </label>

        <input type="checkbox"
               id="css"
               name="skills"
               value="css">

        <label for="css">
            CSS
        </label>

        <input type="checkbox"
               id="javascript"
               name="skills"
               value="javascript">

        <label for="javascript">
            JavaScript
        </label>

        <br><br>

        <label for="color">
            Favorite Color:
        </label>

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

        <br><br>

        <label for="resume">
            Upload Resume:
        </label>

        <input type="file"
               id="resume"
               name="resume"
               accept=".pdf,.doc,.docx">

        <br><br>

        <label for="experience">
            Experience:
        </label>

        <input type="range"
               id="experience"
               name="experience"
               min="0"
               max="10"
               value="0">

        <br><br>

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

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

    </form>

</body>

</html>

Summary

HTML provides many input types for different kinds of user data. Common types include text, email, password, number, tel, url, date, time, file, radio, checkbox, color, range, and hidden inputs. Using the correct input type improves form behavior, usability, and built-in browser validation.

← Previous: Form Attributes Next: Labels →