HTML Forms

HTML Input Types

The <input> element is one of the most versatile and commonly used elements in HTML forms.
It can represent different types of input fields depending on the type attribute.
Each input type provides a specific way to collect and validate user data.

Basic Syntax

html

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

The type attribute defines the kind of input. For example, text, email, password, checkbox, and so on.

Commonly Used Input Types

Input Type	Description	Example
text	A single-line text input.	<input type="text">
password	Hides input characters (for passwords).	<input type="password">
email	Validates email format.	<input type="email">
number	Allows numeric input only.	<input type="number">
tel	For phone numbers.	<input type="tel">
url	Ensures valid website URL format.	<input type="url">
date	Provides a calendar for date selection.	<input type="date">
time	Lets users pick a time.	<input type="time">
datetime-local	For date and time without timezone.	<input type="datetime-local">
month	For selecting a month and year.	<input type="month">
week	For selecting a week and year.	<input type="week">
color	Opens a color picker.	<input type="color">
checkbox	Allows multiple selections.	<input type="checkbox">
radio	Allows a single selection from multiple options.	<input type="radio">
file	Lets users upload files.	<input type="file">
range	Displays a slider for numeric values.	<input type="range" min="0" max="100">
hidden	Used to store data that’s not visible to users.	<input type="hidden" name="id" value="001">
submit	Creates a form submission button.	<input type="submit">
reset	Resets all form fields.	<input type="reset">
button	Generic clickable button.	<input type="button" value="Click Me">

Example: Various Input Types

Input Type Example

html

<form action="/submit" method="post">
  <!-- Text-based Inputs -->
  <label>Text:</label>
  <input type="text" name="username" placeholder="Enter your name"><br><br>

  <label>Password:</label>
  <input type="password" name="password" placeholder="Enter password"><br><br>

  <label>Email:</label>
  <input type="email" name="email" placeholder="name@example.com"><br><br>

  <label>Telephone:</label>
  <input type="tel" name="phone" placeholder="+91 9876543210"><br><br>

  <label>Number:</label>
  <input type="number" name="age" min="1" max="100"><br><br>

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

  <!-- Date and Time Inputs -->
  <label>Date:</label>
  <input type="date" name="dob"><br><br>

  <label>Time:</label>
  <input type="time" name="appt"><br><br>

  <label>Datetime Local:</label>
  <input type="datetime-local" name="meeting"><br><br>

  <label>Month:</label>
  <input type="month" name="birthmonth"><br><br>

  <label>Week:</label>
  <input type="week" name="projectweek"><br><br>

  <!-- Choice Inputs -->
  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br><br>

  <label>Hobbies:</label>
  <input type="checkbox" name="hobby" value="reading"> Reading
  <input type="checkbox" name="hobby" value="traveling"> Traveling
  <input type="checkbox" name="hobby" value="music"> Music<br><br>

  <!-- File and Color Inputs -->
  <label>Upload File:</label>
  <input type="file" name="resume"><br><br>

  <label>Favorite Color:</label>
  <input type="color" name="favcolor"><br><br>

  <!-- Range Input -->
  <label>Volume:</label>
  <input type="range" name="volume" min="0" max="100"><br><br>

  <!-- Hidden Input -->
  <input type="hidden" name="userid" value="12345">

  <!-- Buttons -->
  <input type="submit" value="Submit Form">
  <input type="reset" value="Reset Form">
  <input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</form>

Explanation

Text-based Inputs - text, password, email, tel, url, number let users enter basic info.
Date & Time Inputs - date, time, month, week, and datetime-local add native pickers.
Choice Inputs - checkbox and radio provide selection options.
File/Color/Range - file uploads, color opens a color picker, range provides a slider.
Buttons - submit, reset, and button control form actions.
Hidden - Stores background data like user IDs or tokens.

Key Notes

Each input should have a name attribute for data submission.
Use placeholder for hint text inside input fields.
Use required, min, max, and pattern attributes for validation.
Radio buttons with the same name are grouped together.
The file type requires enctype="multipart/form-data" in the <form> tag for file uploads.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML input types determine what kind of data can be entered and how browsers validate it.
By using appropriate input types, you make forms more intuitive, secure, and user-friendly.
Next, we’ll explore HTML Input Attributes - which define how these input types behave and interact.

PreviousHTML Form Elements NextHTML Input Attributes