HTML Input Types – text, email, password, date, color and All Types

Overview of All Input Types

Type	Description	Mobile keyboard
`text`	Single-line free text	Default keyboard
`email`	Email address (validates format)	@ symbol shown
`password`	Masked input (dots/asterisks)	Default keyboard
`url`	URL (validates format)	Shows . / : keys
`tel`	Telephone number (no format validation)	Numeric dial pad
`search`	Search box (may show × clear button)	Shows Search key
`number`	Numeric value with up/down arrows	Numeric keyboard
`date`	Date picker (year-month-day)	Date picker
`time`	Time picker (hours:minutes)	Time picker
`datetime-local`	Date and time combined (no timezone)	Date+time picker
`month`	Month and year picker	Month picker
`week`	Week number and year picker	Week picker
`checkbox`	Tick-box, true/false toggle	Default keyboard
`radio`	One choice from a group	Default keyboard
`range`	Slider for numeric range	—
`color`	Colour picker	—
`file`	File upload chooser	—
`hidden`	Invisible field, carries data silently	—
`submit`	Submit button	—
`reset`	Reset all fields to defaults	—
`button`	Generic button (no default action)	—
`image`	Graphical submit button	—

Text Inputs

These types all render as single-line text boxes but trigger different mobile keyboards, browser auto-fill suggestions, and built-in format validation.

HTML

<!-- Plain text -->
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="e.g. alice_smith">

<!-- Email – browser validates format (must contain @ and a domain) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="alice@example.com">

<!-- Password – characters are masked -->
<label for="password">Password</label>
<input type="password" id="password" name="password" minlength="8">

<!-- URL – browser validates it starts with http:// or https:// -->
<label for="website">Website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

<!-- Tel – no format validation; use pattern attribute for that -->
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" placeholder="+44 7700 900000">

<!-- Search – similar to text but styled differently; may show × clear button -->
<label for="site-search">Search</label>
<input type="search" id="site-search" name="q" placeholder="Search tutorials…">

<!-- Number – restricts to numeric values, shows up/down arrows -->
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="1" max="99" step="1" value="1">

Date and Time Inputs

These inputs render browser-native date and time pickers. The submitted value is always in a standardised machine-readable format regardless of how the browser displays it to the user.

HTML

<!-- Date: submitted as YYYY-MM-DD -->
<label for="birthday">Date of birth</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2026-12-31">

<!-- Time: submitted as HH:MM -->
<label for="meeting-time">Meeting time</label>
<input type="time" id="meeting-time" name="meeting_time" min="09:00" max="17:00" step="1800">

<!-- Datetime-local: no timezone info; submitted as YYYY-MM-DDTHH:MM -->
<label for="event-dt">Event date and time</label>
<input type="datetime-local" id="event-dt" name="event_datetime">

<!-- Month: submitted as YYYY-MM -->
<label for="exp-month">Card expiry (month/year)</label>
<input type="month" id="exp-month" name="expiry">

<!-- Week: submitted as YYYY-W## -->
<label for="report-week">Report week</label>
<input type="week" id="report-week" name="report_week">

Styling date inputs varies significantly across browsers. For consistent cross-browser date pickers, many production sites use a JavaScript date-picker library. However, native date inputs work well on mobile and require no JavaScript.

Selection Inputs

Checkbox, radio, range, color, and file inputs allow users to choose or pick values rather than type them.

HTML

<!-- Checkbox – single true/false toggle -->
<label>
  <input type="checkbox" name="agree" value="yes">
  I agree to the terms and conditions
</label>

<!-- Checkbox group – multiple can be checked -->
<fieldset>
  <legend>Preferred topics</legend>
  <label><input type="checkbox" name="topics" value="html"> HTML</label>
  <label><input type="checkbox" name="topics" value="css"> CSS</label>
  <label><input type="checkbox" name="topics" value="js"> JavaScript</label>
</fieldset>

<!-- Radio buttons – only one in the group can be selected (same name) -->
<fieldset>
  <legend>Experience level</legend>
  <label><input type="radio" name="level" value="beginner"> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

<!-- Range slider – numeric value between min and max -->
<label for="volume">Volume: <output id="volume-output">50</output></label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50"
  oninput="document.getElementById('volume-output').value = this.value">

<!-- Color picker – submitted as a hex color e.g. #ff5733 -->
<label for="brand-color">Brand colour</label>
<input type="color" id="brand-color" name="brand_color" value="#0d6efd">

<!-- File upload -->
<label for="avatar">Profile picture</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

<!-- Multiple file upload -->
<label for="documents">Upload documents</label>
<input type="file" id="documents" name="documents" accept=".pdf,.docx" multiple>

Hidden, Submit, Reset, and Button Inputs

HTML

<!-- Hidden – invisible to users, carries server-side data -->
<input type="hidden" name="csrf_token" value="abc123xyz">
<input type="hidden" name="product_id" value="4821">

<!-- Submit – sends the form; value becomes button text -->
<input type="submit" value="Place order">

<!-- Reset – clears all fields to their default values -->
<input type="reset" value="Clear form">

<!-- Button – no default action; controlled by JavaScript -->
<input type="button" value="Preview" onclick="previewForm()">

<!-- Image submit – graphical button; submits coordinates of click -->
<input type="image" src="/assets/submit-btn.png" alt="Submit order">

Prefer <button> over <input type="submit">. The <button> element can contain HTML (icons, styled text) and is more flexible. See the Buttons page for details.

Common Input Attributes

These attributes work across many or all input types to control behaviour, appearance, and constraints.

HTML

<!-- placeholder: hint text shown when field is empty -->
<input type="text" placeholder="Enter your name">

<!-- value: sets the initial (default) value -->
<input type="text" name="country" value="United Kingdom">

<!-- min and max: limits for number, range, and date inputs -->
<input type="number" name="age" min="18" max="120">
<input type="date" name="checkin" min="2026-01-01" max="2026-12-31">

<!-- step: increment for number and range inputs -->
<input type="number" name="price" min="0" max="1000" step="0.01">
<input type="range" name="rating" min="1" max="5" step="1">

<!-- autocomplete: helps browser fill known values -->
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="current-password">

<!-- readonly: shows value, prevents editing -->
<input type="text" name="order_id" value="ORD-8821" readonly>

<!-- disabled: greyed out, not submitted -->
<input type="text" name="promo" value="SAVE10" disabled>

📋 Summary

The type attribute transforms <input> behaviour: text, email, password, number, date, checkbox, radio, range, color, file, and more.
type="email" and type="url" validate format automatically on submit.
Date/time types (date, time, datetime-local, month, week) render native OS pickers and submit standardised values.
Radio buttons sharing the same name form a group — only one can be selected.
type="hidden" carries data silently without displaying anything to the user.
placeholder, value, min, max, and step are key supporting attributes for controlling input behaviour.

Frequently Asked Questions

What is the difference between type="text" and type="search"?

Functionally they are nearly identical — both accept any text. The difference is semantic and presentational: browsers may style type="search" with rounded corners and add a clear (×) button. On macOS Safari, search inputs get a native appearance. Search inputs also hint to screen readers and search engines that this input is for searching. Use type="search" for search boxes and type="text" for general text fields.

Does type="tel" validate phone number format?

No. type="tel" only triggers the numeric dial pad on mobile devices — it performs no format validation. To validate phone numbers, use the pattern attribute with a regular expression, or handle validation server-side. Phone number formats vary enormously by country, making a universal regex impractical.

Why use type="hidden"? Isn't it insecure?

Hidden inputs are useful for passing data (like CSRF tokens, product IDs, or session identifiers) that the user does not need to see or edit. They are not a security mechanism — anyone can view and edit them by inspecting the page source. Never use hidden inputs to store data that the user should not be able to modify (such as a price). Always re-validate server-side.

Can I use type="number" for credit card numbers?

No. Credit card numbers can start with a zero, are too long for JavaScript's number precision, and should never be incremented or treated as mathematical values. Use type="text" with inputmode="numeric" and an appropriate pattern for credit card inputs. The inputmode attribute shows the numeric keyboard without the pitfalls of type="number".