Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

HTML5 Input Types

Introduction​

<input> elements are among the most complex and powerful elements in HTML5.
The decisive thing here is the type attribute. Because which type of <input> element you use directly affects the way the user enters data.

That's why <input> and type attributes are two critical concepts in web development.

Currently, there are a total of 22 different input types in HTML5. In this tutorial, we will examine them all one by one.

Standard Attributes​

Before we discuss the different input types one by one, there are some common attributes that each type accepts:

  • autocomplete → Specifies the autocomplete feature for the input. It is usually set to on.
  • autofocus → Determines whether to automatically focus on this input when the page is loaded.
  • disabled → Boolean value indicating whether input should be disabled or not.
  • form → ID of the <form> tag to which this input is linked. By default it connects to the nearest form.
  • list → ID of an <datalist> element that provides recommended values. (Not yet widely supported.)
  • name → Name of the input. When the form is submitted, the data is sent via this name.
  • required → Determines whether this field must be filled in before the form can be submitted.
  • tabindex → The number indicating the focus order when the user presses the TAB key.
  • value → Current (default or user-entered) value of the input.

Type-specific attributes will be explained separately in the relevant input type section.

Note: While most HTML5 input types are well supported in today's modern browsers, some browsers may still not support advanced input types.
In such cases, the unsupported input type automatically falls into a regular text input.

Additionally, although many input types (e.g. email) provide internal validation, it is always recommended to perform server-side validation.

Text​

<input type="text">

Text input supports these attributes:

  • maxlength → Maximum number of characters that can be entered.
  • minlength → The minimum number of characters that must be entered to be considered valid.
  • pattern → regular expression (regex) that the value must match to be considered valid.
  • placeholder → Sample text shown when the field is empty.
  • readonly → Determines whether the input can only be read (cannot be changed).
  • size → Specifies the width of the input box, based on the number of characters.
  • spellcheck → Used to turn spell check on and off.

Password​

<input type="password">

Similar to text input, password also takes free-form text input.
The difference is that it masks (••••) the characters typed by the user for security purposes.

The password type supports all additional attributes of the text type;
The only difference is that it does not support the spellcheck feature.

Hidden​

<input type="hidden">

hidden input is also actually a free text field, but it is invisible to the user.

This type has no extra attributes, but it has one important feature:

  • If you set the attribute name to _charset_, the value of the input will be the character encoding of the submitted form.

Email​

<input type="email">

email input checks whether the entered value is in email format.
So the user has to type a valid address like test@example.com.

The email type supports both public attributes and attributes of the text type.
In addition, it also has a special attribute:

  • multiple → If true is done, the input accepts multiple email addresses.
    (Addresses are written separated by commas: ali@mail.com, veli@mail.com)

###Number

<input type="number">

number input accepts only numeric value (integer or decimal number).
In most browsers, increase/decrease buttons also appear next to this input.

In mobile browsers, the number pad is usually opened instead of the full keyboard, which simplifies the user experience.

number type:

  • Supports common attributes,

  • shares attributes placeholder and readonly from type text,

  • It also has new number-specific attributes:

  • min → The smallest value that will be considered valid.

  • max → The maximum value that will be considered valid.

  • step → Increase/decrease range when up/down arrow keys are pressed.

<input type="search">

search input is actually a text input, but it has an extra button to clear the entered text with a single click**.

Its extra attributes are exactly the same as normal text input.

Telephone (tel)​

tel input is designed to get phone number from the user.
But note: the wire type itself does not check whether the number is valid.

Instead, you can add regex validation according to the phone format you want by using the pattern attribute.

<input type="tel">
<input type="tel" placeholder="+90 5xx xxx xx xx" pattern="^\+90\s5\d&#123;2&#125;\s\d&#123;3&#125;\s\d&#123;2&#125;\s\d&#123;2&#125;$" required>
<br><small>Format: +90(5xx) xxx xx xx</small>

tel input accepts all standard attributes of type text,
but spellcheck is not supported in this type.

URL​

url input checks the value entered by the user according to the URL format.
This means it can either be left blank or must be a properly formatted absolute URL such as https://ornek.com.

But be careful ⚠️: This type does not check whether the entered address actually works (whether the domain is being resolved, whether the site is opening, etc.).
It just checks whether the entered data matches the URL format → protokol://domain/...

Like most other text-based inputs, it supports attributes of the text type but does not support the spellcheck property.

<input type="url">

###Checkbox

<input type="checkbox">

checkbox is the input type used to mark one or more options.
It is usually displayed as a list of options.

If you want to use more than one checkbox, you need to define a separate type="checkbox" input for each one.

Important note: The checkbox input itself just shows the box. You must add the description text next to it.

  • checked → Boolean attribute indicating whether the box is checked or not.

Radio Button​

<input type="radio">

radio inputs can be thought of as the “single choice” version of checkboxes.
When multiple radio inputs belong to the same group (same name attribute),
only one can be selected in that group.

  • checked → Boolean attribute indicating whether the radio button is selected or not.

###Range

<input type="range">

range input is actually like a more advanced version of the number type.
It allows the user to select the value via a sliding slider** instead of entering numbers directly.

The range type, like the number type, supports the following attributes:

  • min → Minimum value
  • max → Maximum value
  • step → Increase/decrease range

It also accepts common input attributes.

###Color

<input type="color">

You no longer need to search for the best color picker plugin for your favorite framework.
color input presents a button to the user.

  • Shows the current color selected on the button.
  • When clicked, a pop-up color palette appears. The user can choose the color from this palette or directly enter the hexadecimal color code.

However, the points you should pay attention to are:
The color type is more limited than other input types.

  • Apart from type, the only attribute it supports is value.
  • None of the common input attributes apply to this type.

File​

<input type="file">

One of the most striking input types is file input.
Thanks to this type, the user can easily select one or more files from his computer.
Generally these files are later used to be uploaded to the server.

Recently, the capabilities of file input have been expanded and it now supports the user taking photos or videos from their camera**.

Attributes that can be used in file type:

  • accept → Specifies valid file types (comma separated, extension or MIME type).
  • capture → Specifies the image or video input source.
    • user → Front camera (selfie).
    • environment → Rear camera.
  • files → <FileList> containing the files selected by the user.
  • multiple → If true, user can select multiple files at the same time.

Button​

<input type="button">

The button type is actually just a simple button.
It is very similar to the element <button>, but it has no function on its own.

If you want a button to do something:

  • You should connect an event handler to it,
  • Or you should use types submit or reset.

The most important attribute:

  • value → Determines the text that appears on the button.
    (Same logic as <button>Değer</button>.)

Image​

<input type="image">

image input acts like a button but allows you to use an image instead of a button.
So, it is preferred when you want to add an image instead of a normal button.

Basic attributes:

  • alt → Alt text (shown if image does not load).
  • height → The height of the image in pixels.
  • src → Source (URL) address of the image.
  • width → The width of the image in pixels.

There are additional attributes if you want to use them for form submission purposes:

  • formaction → The URL to which the form will be sent.
  • formenctype → The encoding format of form data (especially in file submission).
  • formmethod → The HTTP method to use (GET or POST).
  • formnovalidate → Allows validation to be skipped when submitting the form.
  • formtarget → Specifies where to open the submission result (e.g. _blank).

Reset​

<input type="reset">

reset input is actually an extension of the button type.
Clicking resets the form to its original state (all fields are cleared or returned to default).

  • value → Determines the text that will appear on the button.

Submit​

<input type="submit">

submit input is the button used to submit the form.
When clicked, the current form will be sent to the specified address action.

###Date

<input type="date">

date input expects a date input from the user.
Besides:

  • Allows changing the date with up/down buttons,
  • Additionally, dates can be easily selected with the calendar picker (date picker), which can be opened in most browsers.

Note: The date displayed to the user always appears in the native format of the browser/language setting.
But actually the value itself is always in the format YYYY-MM-DD (eg: 2025-10-02).

Parameters:

  • min → The earliest date that will be considered valid.
  • max → The latest date that will be considered valid.
  • readonly → Determines whether the input will be read only or not.
  • step → Determines the date increment range when clicking the up/down buttons.

Time​

<input type="time">

time input expects time input from the user.

  • The user can increase or decrease hour and minute values with the up/down buttons.
  • AM/PM (a.m./afternoon) selection is possible in some browsers,
  • In modern browsers, a time picker interface appears that provides convenience to the user.

Parameters:

  • min → Earliest time that will be considered valid.
  • max → The latest time that will be considered valid.
  • readonly → Determines whether the input will be read only or not.
  • step → Sets the minute/second increment interval (default is 60 seconds).

Local Date and Time​

<input type="datetime-local">

datetime-local is actually a combination of date and time inputs.
It allows the user to select both date and time in a single field.

⚠️ But be careful: This type is not as widely supported as the others.

Parameters:

  • min → The earliest date and time that will be considered valid.
  • max → The latest date and time that will be considered valid.
  • readonly → Determines whether the input will be read only or not.
  • step → Sets the increase/decrease interval (in seconds).

Month​

<input type="month">

month input provides a similar interface to the date type, but the selection is limited to year and month only.
That is, the day is not selected, only the value is entered in YYYY-MM format.

This type is especially useful for information such as credit card expiration dates or month-year of birth.

Parameters:

  • min → Earliest year-month that will be considered valid.
  • max → The latest year-month that will be considered valid.
  • readonly → Determines whether the input will be read only or not.
  • step → Increase/decrease interval (in months).

Week​

<input type="week">

week input provides a calendar selector similar to the month type,
but this time the selection is just year + week number.

That is, the user selects a value in YYYY-Www format (eg: 2025-W10).

Parameters:

  • min → Earliest year-week to be considered valid.
  • max → The latest year-week that will be considered valid.
  • readonly → Determines whether the input will be read only or not.
  • step → Increase/decrease interval (in weeks).

Result​

The <input> element has come a long way and is now an almost complete toolkit for retrieving data from the user

Support for new input types is evolving rapidly.
Although it's not ideal for these new types to fall into a text input,
at least it makes for a pretty graceful comeback.