HTML Input Types

The <input> tag is the most versatile element in HTML forms. By changing the type attribute, the same <input> tag behaves completely differently — it can become a text box, a date picker, a color selector, a number field, and much more.

Input Type Syntax

<input type="[type-name]" name="fieldname">

All HTML Input Types

text – Single-line Text

<label>Name: <input type="text" name="name" placeholder="Enter full name"></label>

password – Masked Text

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

email – Email Address

Validates the input contains a proper email format with @ symbol.

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

number – Numeric Input

Accepts only numbers. Can set minimum, maximum, and step values.

<label>Age: <input type="number" name="age" min="1" max="120" step="1"></label>

tel – Phone Number

<label>Phone: <input type="tel" name="phone" placeholder="+1 234 567 8900"></label>

url – Web Address

Validates that the input is a properly formatted URL.

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

date – Date Picker

Shows a calendar picker in the browser for selecting a date.

<label>Date of Birth: <input type="date" name="dob"></label>

time – Time Picker

<label>Appointment Time: <input type="time" name="appttime"></label>

datetime-local – Date and Time Combined

<label>Meeting: <input type="datetime-local" name="meeting"></label>

range – Slider

Shows a draggable slider bar for selecting a value within a range.

<label>Volume: 
  <input type="range" name="volume" min="0" max="100" value="50">
</label>

color – Color Picker

Shows a color selection tool to pick a color visually.

<label>Pick a color: <input type="color" name="favcolor" value="#ff0000"></label>

checkbox – Multi-select Box

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the Terms and Conditions</label>

radio – Single-select Button

<input type="radio" id="yes" name="confirm" value="yes">
<label for="yes">Yes</label>

<input type="radio" id="no" name="confirm" value="no">
<label for="no">No</label>

file – File Upload

Opens a file browser for uploading files from a device.

<label>Upload Resume: <input type="file" name="resume" accept=".pdf,.doc"></label>

hidden – Hidden Field

A hidden input is not visible to the user but still sends a value when the form is submitted. Used to pass data like user IDs or tokens.

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

search – Search Box

Similar to text but styled by the browser as a search field (may show a clear button).

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

submit and reset – Form Action Buttons

<input type="submit" value="Submit">
<input type="reset" value="Clear All">

Input Types Quick Reference

Key Points to Remember

• The type attribute determines the behavior and appearance of an input field
• Types like email, number, and url have built-in validation
• Always use the most specific input type available for better user experience on mobile
• Use min, max, and step with number and range inputs
• The accept attribute on file inputs filters what file types can be selected
• The hidden type sends data without showing anything to the user