What Is HTML Input Types

In the HTML Input Types section depicts the various kinds for the HTML <input> element.

HTML Input Types

Here are the diverse info 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">

Tip: The default value of the type attribute is “text”.

Input Type Text

<input type="text">characterizes a solitary 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>

This is the means by which the HTML code above will be shown in a program:

HTML Input
HTML Input

Input Type Password

<input type="password"> defines a password field:

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>

This is the means by which the HTML code above will be shown in a program:

HTML Input
HTML Input

The characters in a secret phrase field are concealed (displayed as bullets or circles).

Input Type Submit

<input type="submit"> characterizes a catch for submitting structure information to a structure controller.

The structure controller is ordinarily a worker page with a content for preparing input information.

The structure controller is indicated in the structure’s activity quality:

Example

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

This is the means by which the HTML code above will be shown in a program:

HTML Input
HTML Input

In the event that you preclude the present catch’s worth quality, the catch will get a default text:

Example

<form action=”/action_page.php”>
  <label for=”fname”>First name:</label><br>
  <input type=”text” id=”fname” name=”fname” value=”John”><br>
  <label for=”lname”>Last name:</label><br>
  <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
  <input type=”submit”>
</form>

Input Type Reset

<input type="reset"> characterizes a reset button that will reset all structure esteems to their default esteems:

Example

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

This is the means by which the HTML code above will be shown in a program:

HTML Input
HTML Input

In the event that you change the info esteems and, snap the “Reset” button, the structure information will be reset to the default esteems.

Input Type Radio

<input type="radio"> characterizes a radio catch.

Radio catches let a client select ONLY ONE of a set number of decisions:

Example

<p>Choose your favorite Web language:</p>

<form>
  <input type=”radio” id=”html” name=”fav_language” value=”HTML”>
  <label for=”html”>HTML</label><br>
  <input type=”radio” id=”css” name=”fav_language” value=”CSS”>
  <label for=”css”>CSS</label><br>
  <input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”>
  <label for=”javascript”>JavaScript</label>
</form>

This is the manner by which the HTML code above will be shown in a program:

 HTML
 CSS
 JavaScript

Input Type Checkbox

<input type="checkbox"> characterizes a checkbox.

Checkboxes let a client select ZERO or MORE choices of a set number of decisions.

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><br>
  <input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”>
  <label for=”vehicle3″> I have a boat</label>
</form>

This is the way the HTML code above will be shown in a program:

I have a bike
 I have a car
 I have a boat

Input Type Button

<input type="button"> defines a button:

Example

<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>

This is the way the HTML code above will be shown in a program:

Input Type Color

The <input type="color">is utilized for input handles that ought to contain a shading.

Contingent upon program support, a shading picker can appear in the info field.

Example

<form>
  <label for=”favcolor”>Select your favorite color:</label>
  <input type=”color” id=”favcolor” name=”favcolor”>
</form>

Input Type Date

The <input type="date">is utilized for input handles that ought to contain a date.

Contingent upon program support, a date picker can appear in the information field.

Example

<form>
  <label for=”birthday”>Birthday:</label>
  <input type=”date” id=”birthday” name=”birthday”>
</form>

You can likewise utilize the min and max credits to add limitations to dates:

Example

<form>
  <label for=”datemax”>Enter a date before 1980-01-01:</label>
  <input type=”date” id=”datemax” name=”datemax” max=”1979-12-31″><br><br>
  <label for=”datemin”>Enter a date after 2000-01-01:</label>
  <input type=”date” id=”datemin” name=”datemin” min=”2000-01-02″>
</form>

Input Type Datetime-local

The <input type="datetime-local"> indicates a date and time input field, with no time region.

Contingent upon program support, a date picker can appear in the info field.

Example

<form>
  <label for=”birthdaytime”>Birthday (date and time):</label>
  <input type=”datetime-local” id=”birthdaytime” name=”birthdaytime”>
</form>

Input Type Email

The <input type="email">is utilized for input handles that ought to contain an email address.

Contingent upon program support, the email address can be naturally approved when submitted.

Some cell phones perceive the email type, and add “.com” to the console to coordinate with email input.

Example

<form>
  <label for=”email”>Enter your email:</label>
  <input type=”email” id=”email” name=”email”>
</form>

Input Type File

The <input type="file"> characterizes a document select field and a “Peruse” button for record transfers.

Example

<form>
  <label for=”myfile”>Select a file:</label>
  <input type=”file” id=”myfile” name=”myfile”>
</form>

Input Type Hidden

The <input type="hidden">characterizes a secret information field (not apparent to a client).

A secret field let web engineers incorporate information that can’t be seen or changed by clients when a structure is submitted.

A secret field frequently stores what information base record that should be refreshed when the structure is submitted.

Note: While the worth isn’t shown to the client in the page’s substance, it is apparent (and can be altered) utilizing any program’s designer devices or “View Source” usefulness. Try not to utilize covered up inputs as a type of safety!

Example

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

Input Type Month

The <input type="month"> permits the client to choose a month and year.

Contingent upon program support, a date picker can appear in the info field.

Example

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

Input Type Number

The <input type="number"> characterizes a numeric info field.

You can likewise set limitations on what numbers are acknowledged.

The accompanying model shows a numeric information field, where you can enter a worth from 1 to 5:

Example

<form>
  <label for=”quantity”>Quantity (between 1 and 5):</label>
  <input type=”number” id=”quantity” name=”quantity” min=”1″ max=”5″>
</form>

Input Restrictions

Here is a rundown of some normal information limitations:

AttributeDescription
checkedSpecifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”)
disabledSpecifies that an input field should be disabled
maxSpecifies the maximum value for an input field
maxlengthSpecifies the maximum number of character for an input field
minSpecifies the minimum value for an input field
patternSpecifies a regular expression to check the input value against
readonlySpecifies that an input field is read only (cannot be changed)
requiredSpecifies that an input field is required (must be filled out)
sizeSpecifies the width (in characters) of an input field
stepSpecifies the legal number intervals for an input field
valueSpecifies the default value for an input field

You will get familiar with input limitations in the following section.

The accompanying model shows a numeric information field, where you can enter a worth from 0 to 100, in strides of 10. The default esteem is 30:

Example

<form>
  <label for=”quantity”>Quantity:</label>
  <input type=”number” id=”quantity” name=”quantity” min=”0″ max=”100″ step=”10″ value=”30″>
</form>

Input Type Range

The <input type="range"> characterizes a control for entering a number whose careful worth isn’t significant (like a slider control). Default range is 0 to 100. Notwithstanding, you can set limitations on what numbers are acknowledged with the min, max, and step credits:

Example

<form>
  <label for=”vol”>Volume (between 0 and 50):</label>
  <input type=”range” id=”vol” name=”vol” min=”0″ max=”50″>
</form>

Input Type Search

The <input type="search">is utilized for search fields (a pursuit field acts like a normal content field).

Example

<form>
  <label for=”gsearch”>Search Google:</label>
  <input type=”search” id=”gsearch” name=”gsearch”>
</form>

Input Type Tel

The <input type="tel"> is utilized for input handles that ought to contain a phone number.

Example

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

Input Type Time

The <input type="time"> permits the client to choose a period (no time region).

Contingent upon program support, a period picker can appear in the information field.

Example

<form>
  <label for=”appt”>Select a time:</label>
  <input type=”time” id=”appt” name=”appt”>
</form>

Input Type Url

The <input type="url"> is utilized for input handles that ought to contain a URL address.

Contingent upon program support, the url field can be naturally approved when submitted.

Some cell phones perceive the url type, and adds “.com” to the console to coordinate with url input.

Example

<form>
  <label for=”homepage”>Add your homepage:</label>
  <input type=”url” id=”homepage” name=”homepage”>
</form>

Input Type Week

The <input type="week"> permits the client to choose a week and year.

Contingent upon program support, a date picker can appear in the info field.

Example

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