HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Input Types

The input element is used to create an input field for web-based forms in order to accept data from the user.

How an input element works varies considerably depending on the value of its type attribute.

This chapter describes the different input types for the <input> element.


<input type="text">

The <input type="text"> defines a single-line input text field. The default width of the text field is 20 characters.

Run code

Name:

The name attribute is used to give a name to the element which is sent to the server to be recognized and get the value.


<input type="password">

The <input type="password"> defines a single-line input password field.

The characters in a password field are masked with a symbol such as the asterisk ("") or a dot ("").

Run code

Password:


<input type="submit">

The <input type="submit"> defines a button to submit the form to the server.

Run code

The value attribute of input type submit is used as the button's label.

If you don't specify value attribute, you get an button with a default label like Submit/Submit Query (depending on the browser).

Run code

<input type="button">

The <input type="button"> defines a simple push button which can be programmed to control custom functionality using JavaScript.

Run code

The value attribute contains a string that is used as the button's label.


Difference between <input type="submit"> and <input type="button">

The <input type="submit"> is used to submit the form to the server.

The <input type="button"> defines a simple clickable button, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function using javascript. This element defines a simple button, it has no default behavior. To make buttons do anything, you have to write JavaScript code to do the work.



<input type="reset">

The <input type="reset"> defines a button that resets all of the inputs in the form to their initial values.

Run code
Username:

Password :

If you enter some values and then click the "Reset" button, the form-data will be reset to their initial values.


<input type="checkbox">

The <input type="checkbox"> defines a checkbox that is checked (ticked) when activated.

Checkboxes let a user select one or more options of a limited number of choices.

Run code




<input type="radio">

The <input type="radio"> defines a radio button.

Radio button is similar to checkbox, but with an important distinction — radio buttons are designed for selecting only one value, whereas checkboxes allow you to select multiple values.

Run code




<input type="file">

The <input type="file"> let the user choose one or more files from their host machine for file uploads.

Run code

Acceptable file types can be specified with the accept attribute.

The accept attribute doesn't validate the types of the selected files — it provides hints for browsers to guide users towards selecting the correct file types.


<input type="hidden">

The <input type="hidden"> let web developers include data that cannot be seen or modified by users when a form is submitted.

Run code

The value attribute holds a string that contains the hidden data you want to include when the form is submitted to the server.

One of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted.

Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.


New HTML5 Input Types

HTML5 has introduced many form input types:

  • color
  • date
  • datetime-locale
  • email
  • number
  • range
  • search
  • tel
  • url
  • month
  • week
  • time

In browsers that do not yet support the HTML5 input types, a <input type="text"> will be used.


<input type="color">

The <input type="color"> provide a UI element that lets a user specify a color.

Run code

The default color is #000000 (black) if value attribute is omitted.


<input type="date">

The <input type="date"> creates an input field allowing a date to be easily entered.

Run code

You can use the min and max attributes to restrict the dates that can be chosen by the user:

Run code

You will learn about input attributes in the next chapter.


<input type="datetime-local">

The <input type="datetime-local"> creates an input field allowing a date and time to be easily entered.

Run code

<input type="email">

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

Run code

<input type="month">

The <input type="month"> creates an input field that let the user enter a month and year.

Run code

<input type="number">

The <input type="number"> creates an input field allowing a number to be easily entered.

You can use min, max and step attributes to set restrictions on what numbers are accepted.

Run code

<input type="range">

The <input type="range"> specifies a control for entering a number whose exact value is not important.

This is represented using a slider or dial control.

The default range is 0 to 100 however, you can use min, max, value and step attributes to set restrictions on what numbers are accepted.

Run code

<input type="search">

The <input type="search"> is used for search fields (a search field behaves like a regular text field except it adds x icon after you type something).

Run code

<input type="url">

The <input type="url"> is used for input fields that should contain a URL address.

Run code

<input type="week">

The <input type="week"> defines an input control for entering week and year.

Run code

All Input Type Values

Here is the list of all input types you can use in HTML form:

Type Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month, day (no time))
datetime-local Defines a date and time control (year, month, day, time (no timezone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse" button (for file uploads)
hidden Defines a hidden input field
image Defines an image as the submit button
month Defines a month and year control (no timezone)
number Defines a field for entering a number
password Defines a password field
radio Defines a radio button
range Defines a range control (like a slider control)
reset Defines a reset button (resets the form-data to its initial values)
search Defines a text field for entering a search string
submit Defines a submit button (submits form-data)
tel Defines a field for entering a telephone number
text Defines a single-line text field (This is Default)
time Defines a control for entering a time (no timezone)
url Defines a field for entering a URL
week Defines a week and year control (no timezone)