HTML Input Types

Interactive forms are at the heart of modern web applications—they let users log in, search, upload files, and more. HTML’s <input> element powers these interactions through a variety of type values. In this tutorial, you’ll learn what each input type does, how to implement it, and tips to help beginners build better forms.

Learning Outcomes

After completing this tutorial on HTML Input Types you will be able to:

• Recognize and choose the appropriate input type for different data needs
• Write <input> elements with basic attributes like type, name, id, placeholder, min, max and step
• Implement user-friendly features such as suggestions with <datalist> and list
• Tie inputs to forms from anywhere on the page using the form attribute
• Provide custom error messages and live feedback to guide users through form completion

All HTML Input Types

Input Type	Description
text	Single-line text field
password	Masked text field for passwords
submit	Button that sends form data to the server
reset	Button that restores default form values
radio	Mutually exclusive selection option
checkbox	Independent on/off option
button	Generic clickable button
color	Color picker
date	Date picker (year, month, day)
datetime-local	Date + time picker (no timezone)
email	Text field with email-format validation
file	File chooser
hidden	Hidden field (not visible)
image	Image as submit button
month	Month + year picker
number	Numeric field with optional min/max/step
range	Slider control
search	Text field optimized for search queries
tel	Telephone-number field
time	Time picker (hour, minute)
url	Text field with URL-format validation
week	Week-number + year picker

---

Text Input (type="text")

A basic single-line field for freeform text (e.g., names, comments).

How to use:

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="e.g., johndoe">

Example in context:

<form>
  <label for="city">City:</label>
  <input type="text" id="city" name="city" required minlength="2" maxlength="50">
  <input type="submit" value="Submit">
</form>

Output:

City:

Notes:

• Always pair with a <label> for accessibility.
• Use maxlength/minlength to enforce length constraints.
• The default input size is about 20 characters—override with CSS or the size attribute.

Password Input (type="password")

A text field that masks user input for sensitive data.

How to use:

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required>

Example in context:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" placeholder="At least 8 characters">
  <input type="submit" value="Log In">
</form>

Output:

Email: Password:

Notes:

• Browsers may warn users if a password field is not served over HTTPS.
• Use client-side pattern or JavaScript to enforce complexity (uppercase, numbers, symbols).
• Always validate passwords server-side as well.

Submit Button (type="submit")

A button that sends the form’s data to the URL defined in the form’s action attribute.

How to use:

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

Example in context:

<form action="/subscribe" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Subscribe">
</form>

Output:

Email:

Notes:

• Omitting value defaults the button text to “Submit”.
• You can style submit buttons like any other button with CSS.
• Use formmethod, formenctype, and formtarget on submit buttons to override form defaults.

Reset Button (type="reset")

A button that clears all user-entered values and restores defaults.

How to use:

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

Example in context:

<form>
  <label for="first">First Name:</label>
  <input type="text" id="first" name="first" value="Jane">
  <label for="last">Last Name:</label>
  <input type="text" id="last" name="last" value="Doe">
  <input type="submit" value="Save">
  <input type="reset" value="Reset">
</form>

Output:

First Name: Last Name:

Notes:

• Resetting also clears checkboxes, radio buttons, and selects.
• Rarely used in production—consider whether automatic form clearing is user-friendly.

Radio Button (type="radio")

Allows selection of exactly one option out of a related group.

How to use:

<input type="radio" id="opt1" name="choice" value="1">
<label for="opt1">Option 1</label>

Example in context:

<form>
  <p>Preferred contact method:</p>
  <input type="radio" id="emailOpt" name="contact" value="email" checked>
  <label for="emailOpt">Email</label>
  <input type="radio" id="phoneOpt" name="contact" value="phone">
  <label for="phoneOpt">Phone</label>
  <input type="submit" value="Next">
</form>

Output:

Preferred contact method:

Email Phone

Notes:

• Every radio in a group must share the same name.
• Use checked to set a default choice.
• Remember to pair with labels for improved hit-area and accessibility.

Checkbox (type="checkbox")

Enables users to select zero, one, or multiple independent options.

How to use:

<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>

Example in context:

<form>
  <p>Select toppings:</p>
  <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">
  <label for="pepperoni">Pepperoni</label>
  <input type="checkbox" id="mushrooms" name="toppings" value="mushrooms">
  <label for="mushrooms">Mushrooms</label>
  <input type="submit" value="Order">
</form>

Output:

Select toppings:

Pepperoni Mushrooms

Notes:

• Each checkbox can share the same name to submit multiple values as an array.
• Use checked for default selections.
• Consider using hidden inputs to capture unchecked states if needed.

Button (type="button")

A generic button with no default behavior—use JavaScript to define its action.

How to use:

<input type="button" value="Click Me" onclick="alert('Hello!')">

Example in context:

<form>
  <input type="button" value="Show Date" onclick="document.getElementById('out').textContent = new Date();">
  <div id="out"></div>
</form>

Notes:

• Unlike submit/reset, buttons do nothing unless scripted.
• Great for client-side interactions like opening modals or running validation.

Color Picker (type="color")

Allows users to select a color from a native color-picker interface.

How to use:

<input type="color" id="favcolor" name="favcolor" value="#ff0000">

Example in context:

<form>
  <label for="bg">Choose background color:</label>
  <input type="color" id="bg" name="bg" value="#008080">
  <input type="submit" value="Apply">
</form>

Output:

Choose background color:

Notes:

• Not supported in very old browsers—provide fallback with a text field if needed.
• The value must be a valid hex color code.

Date Picker (type="date")

Provides a calendar UI for selecting year, month, and day.

How to use:

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

Example in context:

<form>
  <label for="checkin">Check-in Date:</label>
  <input type="date" id="checkin" name="checkin" min="2025-01-01" max="2025-12-31">
  <input type="submit" value="Book">
</form>

Output:

Check-in Date:

Notes:

• Use min/max to restrict selectable dates.
• Format is always YYYY-MM-DD regardless of locale.

Date + Time (type="datetime-local")

Combines date and time selection (local timezone), no offset.

How to use:

<input type="datetime-local" id="appt" name="appt">

Example in context:

<form>
  <label for="meeting">Meeting:</label>
  <input type="datetime-local" id="meeting" name="meeting" required>
  <input type="submit" value="Schedule">
</form>

Output:

Meeting:

Notes:

• Value format: YYYY-MM-DDThh:mm.
• Browser support varies—test on your target platforms.

Email Field (type="email")

Validates that the entered value matches email address syntax.

How to use:

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

Example in context:

<form>
  <label for="email">Your Email:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">
  <input type="submit" value="Send">
</form>

Output:

Your Email:

Notes:

• Use multiple to accept comma-separated addresses.
• Always validate again on the server.

Image Submit (type="image")

Uses an image as a form submit button.

How to use:

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

Example in context:

<form action="/vote" method="post">
  <input type="image" src="/img/vote.png" alt="Vote Now" width="150" height="50">
</form>

Notes for beginners:

• Coordinates of the click are sent as name.x and name.y.
• Always include meaningful alt text.

File Upload (type="file")

Lets users pick one or more files from their device.

How to use:

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

Example in context:

<form action="/upload" enctype="multipart/form-data" method="post">
  <label for="avatar">Profile Picture:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">
  <input type="submit" value="Upload">
</form>

Notes:

• Always set enctype="multipart/form-data" on the form.
• Use accept to hint allowed file types.

Hidden Field (type="hidden")

Stores data not shown to the user but submitted with the form.

How to use:

<input type="hidden" name="sessionId" value="abc123">

Example in context:

<form action="/checkout" method="post">
  <input type="hidden" name="cartId" value="789">
  <!-- visible inputs here -->
  <input type="submit" value="Buy">
</form>

Notes:

• Not secure—users can modify hidden values via dev tools.
• Good for passing tokens or record IDs.

Month Picker (type="month")

Selects a specific month and year.

How to use:

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

Example in context:

<form>
  <label for="rent">Rent Due Month:</label>
  <input type="month" id="rent" name="rent" min="2025-01" max="2025-12">
  <input type="submit" value="Confirm">
</form>

Output:

Rent Due Month:

Notes:

• Value format: YYYY-MM.
• Ideal for billing cycles and subscriptions.

Numeric Input (type="number")

Accepts only numeric values with optional min/max/step.

How to use:

<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1">

Example in context:

<form>
  <label for="guests">Guests:</label>
  <input type="number" id="guests" name="guests" min="1" max="20">
  <input type="submit" value="Reserve">
</form>

Output:

Guests:

Notes:

• Some browsers show spinner controls.
• Use step="any" to allow decimals.

Slider Control (type="range")

A draggable slider for selecting a value within a range.

How to use:

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

Example in context:

<form>
  <label for="brightness">Brightness:</label>
  <input type="range" id="brightness" name="brightness" min="0" max="100">
  <input type="submit" value="Set">
</form>

Output:

Brightness:

Notes:

• Value updates on slide—use JavaScript to reflect changes live.
• The default range is 0–100 if unspecified.

Search Field (type="search")

A text field optimized for search—with built-in clear icon on some browsers.

How to use:

<input type="search" id="query" name="query" placeholder="Search...">

Example in context:

<form action="/results" method="get">
  <input type="search" name="q" placeholder="Search products">
  <input type="submit" value="Go">
</form>

Output:

Notes:

• Clear button appears automatically in WebKit browsers.
• Behaves like a regular text input if unsupported.

Telephone Field (type="tel")

Field for telephone numbers—mobile keyboards often show numeric pad.

How to use:

<input type="tel" id="phone" name="phone" placeholder="123-456-7890">

Example in context:

<form>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  <input type="submit" value="Call Me">
</form>

Output:

Phone:

Notes:

• Use pattern to enforce formatting.
• No built-in format validation—always double-check server-side.

Time Picker (type="time")

Selects a time (hours and minutes).

How to use:

<input type="time" id="alarm" name="alarm">

Example in context:

<form>
  <label for="appt">Appointment Time:</label>
  <input type="time" id="appt" name="appt" required>
  <input type="submit" value="Set">
</form>

Output:

Appointment Time:

Notes:

• Format: hh:mm.
• No timezone—always assume local.

URL Field (type="url")

Validates that the entered text is a well-formed URL.

How to use:

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

Example in context:

<form>
  <label for="blog">Blog URL:</label>
  <input type="url" id="blog" name="blog">
  <input type="submit" value="Visit">
</form>

Output:

Blog URL:

Notes:

• Browsers check for protocol (http:// or https://).
• Server validation is still required.

Week Picker (type="week")

Selects a specific week number and year.

How to use:

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

Example in context:

<form>
  <label for="week">Project Week:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

Output:

Project Week:

Notes:

• Value format: YYYY-Www (e.g., 2025-W19).
• Great for reporting or scheduling by week.

Common Input Restrictions

Attribute	Applies To	Purpose
required	Most types	Prevents form submission when empty
readonly	Text, search, url, tel, email, date, etc.	Disables editing without graying out
disabled	All inputs	Removes focus and excludes from submission
maxlength	Text, search, url, tel, email, password	Limits number of characters
min/max	Numeric, date/time, range, month, week	Defines allowable value range
step	Numeric, date/time, range	Controls value increments
pattern	Text, search, url, tel, email, password	Enforces regex-based format validation
accept	File	Hints allowed MIME types
multiple	Email, file	Allows multiple comma/file selections
autocomplete	Most except checkboxes, radios, buttons	Guides browser autofill behavior

Additional Features

HTML inputs can do more than just collect text. Here are some easy ways to make your forms friendlier and more helpful:

• Show suggestions as you type. Let users pick from a list instead of typing everything. Add a list attribute to your <input> and define the choices inside a <datalist>.
• Let the browser check for mistakes. Built-in checks can stop empty fields or bad formats. Call methods like checkValidity() or reportValidity() in your JavaScript, and use setCustomValidity() to show your own messages.
• Give extra help to screen readers. Add attributes like aria-label or aria-describedby alongside your normal <label> so people using assistive tools know exactly what each field does.
• Show the right keyboard on phones. Add inputmode="numeric" or inputmode="email" to your <input> and mobile devices will pop up the number pad or email keyboard automatically.
• Use placeholder text inside fields. A short hint like placeholder="you@example.com" appears inside an empty box, so users know what to type without extra labels.
• Put inputs wherever you like. Even if an <input> sits outside your <form>, you can tie it to that form by adding form="myFormId" so it still sends data on submit.
• Group related fields together. Wrap related inputs in <fieldset> and give the group a title with <legend>. This adds a clear box around them and helps everyone understand they belong together.
• React as users type. Listen for events such as input or change on your fields. You can update page content instantly—like showing a live preview or enabling a submit button once everything looks good.

These small additions take just a few extra lines of code but make your forms easier to fill out, help catch errors sooner, and work better on phones and with assistive tools.

FAQs on HTML Input Types

What happens if I omit the type attribute?

The default is type="text", so you’ll get a single-line text field.

Can I style input placeholders?

Yes—use the ::placeholder pseudo-element to change color, opacity, and font.

How do I allow decimal numbers in a number input?

Set step="any" or step="0.01" depending on precision needs.

Are all input types supported in every browser?

Most modern browsers support the core set; test specialized types (color, date) and provide fallbacks if needed.

How can I provide custom error messages for invalid inputs?

Use the Constraint Validation API—attach an invalid event listener and call setCustomValidity() with your message.