HTML Input Types

Examine comprehensive input field variations enabling specialized data capture scenarios

Input elements render through multiple presentation modes determined by type attribute specifications. HTML5 specifications introduced extensive input variants delivering enhanced control mechanisms and integrated validation capabilities.

HTML Input Types

Here are the different input types you can use in HTML:

text
password
email
number
tel
url
date
time
datetime-local
month
week
color
range
file
checkbox
radio
submit
reset
button
image
hidden
search

Input Type Text

<input type="text"> defines a single-line text input field:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Result:

Input Type Password

<input type="password"> defines a password field. Characters are masked (shown as asterisks or dots):

Example

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Result:

⚠️ Security Note

The characters in a password field are masked, but the value is still sent as plain text when the form is submitted. Always use HTTPS for forms containing passwords!

Input Type Email

<input type="email"> is used for input fields that should contain an e-mail address. The email address is automatically validated when submitted:

Example

<form>
  <label for="email">Enter your email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

Benefits:

  • Automatic validation for email format
  • Mobile devices may show a specialized keyboard with @ symbol
  • Can use with the multiple attribute to accept multiple email addresses

Input Type Number

<input type="number"> defines a numeric input field. You can set restrictions on what numbers are accepted:

Example

<form>
  <label for="quantity">Quantity (between 1 and 5):</label><br>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

Input Restrictions

You can use the following attributes to specify restrictions:

  • min - Specifies the minimum value
  • max - Specifies the maximum value
  • step - Specifies the legal number intervals
  • value - Specifies the default value

Example with Step

<input type="number" id="points" name="points" min="0" max="100" step="10" value="30">

Input Type Tel

<input type="tel"> is used for input fields that should contain a telephone number:

Example

<form>
  <label for="phone">Enter your phone number:</label><br>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>
  <small>Format: 123-456-7890</small><br><br>
  <input type="submit" value="Submit">
</form>

Note: Mobile devices will display a numeric keypad when this input type is focused.

Input Type URL

<input type="url"> is used for input fields that should contain a URL address. Automatically validated to ensure proper URL format:

Example

<form>
  <label for="homepage">Add your homepage:</label><br>
  <input type="url" id="homepage" name="homepage"><br><br>
  <input type="submit" value="Submit">
</form>

Input Type Search

<input type="search"> is used for search fields. A search field behaves like a regular text field, but may have a clear button:

Example

<form>
  <label for="gsearch">Search Google:</label><br>
  <input type="search" id="gsearch" name="gsearch"><br><br>
  <input type="submit" value="Search">
</form>

Input Type Date

<input type="date"> is used for input fields that should contain a date. Browsers display a date picker control:

Example

<form>
  <label for="birthday">Birthday:</label><br>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

You can also add restrictions to dates:

Example with Min and Max

<input type="date" id="datemax" name="datemax" min="2000-01-01" max="2025-12-31">

Input Type Datetime-local

<input type="datetime-local"> specifies a date and time input field, with no time zone:

Example

<form>
  <label for="meeting">Enter a date and time for your meeting:</label><br>
  <input type="datetime-local" id="meeting" name="meeting"><br><br>
  <input type="submit" value="Submit">
</form>

Input Type Time

<input type="time"> allows the user to select a time (no time zone):

Example

<form>
  <label for="appt">Select a time:</label><br>
  <input type="time" id="appt" name="appt"><br><br>
  <input type="submit" value="Submit">
</form>

Input Type Month and Week

Month Input

<input type="month"> allows the user to select a month and year:

Example

<form>
  <label for="bdaymonth">Birthday (month and year):</label><br>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Week Input

<input type="week"> allows the user to select a week and year:

Example

<form>
  <label for="week">Select a week:</label><br>
  <input type="week" id="week" name="week">
</form>

Input Type Color

<input type="color"> is used for input fields that should contain a color. A color picker is shown in browsers that support it:

Example

<form>
  <label for="favcolor">Select your favorite color:</label><br>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

Note: The default value must be in hexadecimal format (#rrggbb).

Input Type Range

<input type="range"> defines a control for entering a number whose exact value is not important (like a slider control):

Example

<form>
  <label for="vol">Volume (between 0 and 50):</label><br>
  <input type="range" id="vol" name="vol" min="0" max="50"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

You can use the following attributes with range:

  • min - Default is 0
  • max - Default is 100
  • step - Default is 1
  • value - Default is the midpoint

Input Type File

<input type="file"> defines a file-select field and a "Browse" button for file uploads:

Example

<form>
  <label for="myfile">Select a file:</label><br>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

Note: When using file uploads, the form must use enctype="multipart/form-data".

Input Type Checkbox and Radio

Checkbox

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options:

Example

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label>
</form>

Radio

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Input Type Submit, Reset, and Button

Submit Button

<input type="submit"> defines a button for submitting form data to a form-handler:

Example

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

Reset Button

<input type="reset"> defines a reset button that resets all form values to their default values:

Example

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

Button

<input type="button"> defines a button (usually used with JavaScript to activate a script):

Example

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

Input Type Hidden

<input type="hidden"> defines a hidden input field (not visible to users). Hidden fields let web developers include data that cannot be seen or modified by users when a form is submitted:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Use cases: Session IDs, user IDs, CSRF tokens, etc.

Input Type Image

<input type="image"> defines an image as a submit button. The image acts as a submit button:

Example

<form>
  <input type="image" src="submit-button.png" alt="Submit" width="100" height="40">
</form>

Note: When using image input, the coordinates of the click (x, y) are also submitted.

HTML Input Types Summary

Type Description
text Single-line text input
password Password field (characters are masked)
email Email address field with validation
number Numeric input with min/max/step
tel Telephone number input
url URL address field with validation
date Date picker (year, month, day)
time Time picker (hour, minute)
datetime-local Date and time picker (no timezone)
month Month and year picker
week Week and year picker
color Color picker
range Slider control for number range
file File upload control
checkbox Checkbox (select multiple)
radio Radio button (select one)
submit Submit button
reset Reset button
button Clickable button
hidden Hidden field (not visible)
image Image as submit button
search Search field

Test Your Knowledge