HTML Input Types

The type of input is set by the type attribute and can be a variety of different types.

Example

<form action="action.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

Standard Syntax

This is the common syntax for input type:

HTML:<input type="value">,
XHTML:<input type="value" />

HTML Input Types

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

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Input Type Button

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

A push button with no default behavior displaying the value of the value attribute, empty by default.

Example

<input type="button" onClick="alert('Hello world!');" value="button">

Try this code ❯

Input Type Checkbox

The <input type="checkbox"> defines a checkbox.

A check box allowing single values to be selected or deselected.

Example

<label for="html">HTML: </label>
<input type="checkbox" id="html" value="HTML">

<label for="css">CSS: </label>
<input type="checkbox" id="css" value="CSS">

<label for="js">JavaScript: </label>
<input type="checkbox" id="js" value="JavaScript">

Try this code ❯

Input Type Color

A control for specifying a color; opening a color picker when active in supporting browsers.

The default value is #000000 (black).

Example

<label for="color1">default color type</label>
<input type="color" id="color1">

<label for="color2">predefined color</label>
<input type="color" id="color2" value="#4985ed">

Try this code ❯

Input Type Date

Provide control for entering a date (year, month, and day, with no time).

Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

Example

<label for="birthday">Your Birthday:</label>
<input type="date" id="birthday">

Try this code ❯

Input Type Datetime-local

Provides controls for entering a date and time, with no time zone.

Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.

Example

<label for="birthday">Your Birthday (date & time):</label>
<input type="datetime-local" id="birthday">

Try this code ❯

Input Type Email

Provides field for entering an email address.

Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

To allows multiple e-mail addresses, add the "multiple" attribute.

Example

<label for="mail">Enter your email:</label>
<input type="email" id="mail">

Try this code ❯

Input Type File

Provides control to the user for select a file.

Use the accept attribute to define the types of files that the control can select.

Example

<label for="myFile">Select a file:</label>
<input type="file" id="myFile">

Try this code ❯

Input Type Hidden

Provides control that is not displayed but whose value is submitted to the server.

A hidden field data that cannot be seen or modified by users when a form is submitted.

A hidden field is used for database record that needs to be updated when the form is submitted.

Example

<input type="hidden" id="myHidden" name="myHidden" value="1234">

Try this code ❯

Input Type Image

Provides graphical submit button.

Displays an image defined by the src attribute.

The alt attribute displays if the image src is missing.

Example

<form action="action">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="submit.jpg" alt="Submit" width="50" height="50">
</form>

Try this code ❯

Input Type Month

Provides control for entering a month and year, with no time zone.

The format is "YYYY-MM".

Example

<label for="month">Select a (month and year):</label>
<input type="month" id="month">

Try this code ❯

Input Type Number

Provides control for entering a number.

Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads.

Following attributes to restrict on entry:

• max - The maximum value allowed
• min - The minimum value allowed
• step - The legal number intervals
• value - The default value(pre entered value)

Example

<label for="rate">Rate (between 1 and 5):</label>
<input type="number" id="rate" name="rate" min="1" max="5">

Try this code ❯

Input Type Password

A single-line text field whose value is obscured. Will alert user if site is not secure.

Example

<label for="paswd">Password:</label>
<input type="password" id="paswd" name="paswd">

Try this code ❯

Input Type Radio

A radio button, allowing a single value to be selected out of multiple choices with the same name value.

Example

<input type="radio" id="html" name="language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="language" value="JavaScript">
<label for="javascript">JavaScript</label>

Try this code ❯

Input Type Range

Provides control for entering a number whose exact value is not important.

Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.

Default range is 0 to 100.

Example

<label for="volm">Volume (between 0 and 150):</label>
<input type="range" id="volm" name="volm" min="0" max="150">

Try this code ❯

Input Type Reset

A button that resets the contents of the form to default values. Not recommended.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="default value"><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">

Try this code ❯

Input Type Search

A single-line text field for entering search strings.

Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.

Example

<label for="srch">Search:</label>
<input type="search" id="srch" name="srch"><br>
<input type="submit" value="Submit">

Try this code ❯

Input Type Submit

Provides button that submits the form.

Example

<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName"><br>
<input type="submit" value="Submit">

Try this code ❯

Input Type Tel

A control for entering a telephone number.

Provides a telephone keypad in some devices with dynamic keypads.

Example

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{5}"><br>

Try this code ❯

Input Type Text

The default value. provides single-line text field.

Line-breaks are automatically removed from the input value.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Try this code ❯

Input Type Time

A control for entering a time value with no time zone.

Example

<label for="tim">Select a time:</label>
<input type="time" id="tim" name="tim">

Try this code ❯

Input Type Url

A field for entering a URL.

Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

Example

<label for="url">Enter a url:</label>
<input type="url" id="url" name="url"><br>

Try this code ❯

Input Type Week

Peovides control for entering a date consisting of a week-year number and a week number with no time zone.

Example

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

Try this code ❯

HTML Input Type Attribute