• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Input Types

← Previous Next →

HTML offers many input types that help you collect specific kinds of data from users. Each input type tells the browser what kind of value is expected, which improves accuracy and makes forms easier to use. In this chapter, you will learn about all important input types, how they work and when you should use them.

What Are Input Types in HTML

Input types are values assigned to the type attribute inside an <input> tag. Based on the input type, the browser decides how the field should behave. For example, a text field accepts letters, a number field accepts digits, a date field shows a date picker and so on. These types make your forms more user friendly and help avoid wrong entries.

Text Input

The text input is the most basic field. It accepts plain text such as names, usernames and general information.

Example

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

Password Input

A password input hides the characters typed by the user. It displays dots instead of letters for privacy.

Example

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

Email Input

The email type checks if the entered text follows the correct email format. Some mobile browsers also show an email-friendly keyboard.

Example

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

Number Input

A number field accepts only digits. It also shows small arrows that let users increase or decrease the value.

Example

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

Telephone Input

The tel type accepts phone numbers. It does not validate formats automatically, but on mobile devices it shows a numeric keypad.

Example

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

URL Input

The URL input checks if the entered value follows a proper web address format.

Example

<input type="url" name="website">

Search Input

The search type works like a text field but is designed for search bars. Some browsers add a clear (X) button inside it.

Example

<input type="search" name="query">

Date Input

The date input shows a date picker, making it easy to select a day without typing.

Example

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

Time Input

The time input allows the user to select time in hours and minutes.

Example

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

Datetime-local Input

This type allows selecting both date and time together in a single control.

Example

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

Month Input

The month type is ideal for selecting month and year, such as billing cycles or subscription periods.

Example

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

Week Input

This type lets users select a specific week of the year.

Example

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

Radio Input

Radio buttons allow users to pick only one option from a list. Buttons with the same name belong to the same group.

Example

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

Checkbox Input

Checkboxes allow multiple selections. They are used for hobbies, skills and similar choices.

Example

<input type="checkbox" name="skill" value="html"> HTML
<input type="checkbox" name="skill" value="css"> CSS

File Input

The file type lets users upload files from their device, such as images, PDFs or documents.

Example

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

Range Input

A range control creates a slider. It is useful for ratings, volume controls and similar elements.

Example

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

Color Input

The color input opens a color picker tool, allowing users to select a colour.

Example

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

Hidden Input

A hidden input is not visible, but it sends important backend data when the form is submitted.

Example

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

Submit Button

The submit button sends the form data to the server.

Example

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

Reset Button

A reset button clears all fields in a form.

Example

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

Button Type

A button input works like a regular button and is usually used with JavaScript for custom actions.

Example

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

Image Input

The image input allows you to use an image as a submit button.

Example

<input type="image" src="submit.png" width="100">

Putting Many Input Types Together

Here is a small form that uses a mix of input types.

<form>

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

  <input type="email" placeholder="Email">

  <input type="number" placeholder="Age">

  <input type="date">

  <input type="color">

  <input type="file">

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

</form>

Summary of HTML Input Types

Input types make forms flexible and user friendly. You learned how text, email, password, number, date, time, radio, checkbox, file, range, color, hidden and many other input types work. Each of them serves a different purpose and improves the accuracy of the data users enter. Once you understand these types, you can design better forms that match your website’s needs.

Practice Questions

Q1. Create a form with text, email, and password fields.

Q2. Add a file upload option with <input type="file">.

Q3. Create radio buttons for gender selection.

Q4. Use a range slider to select volume between 0 to 100.

Q5. Use a color picker to select a background color.

Q6. Include a date picker for selecting DOB.

Q7. Add a time and datetime-local input for scheduling.

Q8. Use tel input with a placeholder for format guidance.

Q9. Add a reset button that clears the form.

Q10. Create a hidden input to pass a user ID value.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top