HTML Input Types

HTML Input Types: This chapter describes the various sorts for the HTML <input> element.

In HTML <input type=” “> is a significant element of HTML form. The “type” attribute of input element can be different sorts, which defines data field. For example, <input type=”text” name=”name”> gives a text box.


In this tutorial, you will learn-

HTML Input Types

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">

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


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>
<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<form action="/action_page.php">
  <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"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>

</body>
</html>

This is how the HTML code above will be displayed in a browser:

Text field

The input type=”text” defines a one-line text input field:






Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.


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>

Info Type Submit

<input type=”checkbox”> defines a catch for submitting form data to a form-handler.

The form-handler is normally a server page with a script for processing input data.

The form-handler is determined in the form’s action attribute:

Example

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

This is how the HTML code above will be displayed in a browser:

Submit Button

The input type=”submit” defines a button for submitting form data to a form-handler:






If you click “Submit”, the form-data will be sent to a page called “/action_page.php”.

On the off chance that you omit the submit catch’s value attribute, 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="Salman"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Khan"><br><br>
  <input type="submit">
</form>

Input Type Reset

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

Example

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

This is how the HTML code above will be displayed in a browser:

Reset Button

The input type=”reset” defines a reset button that resets all form values to their default values:






If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.

Assuming you change the input values and, snap the “Reset” button, the form data will be reset to the default values.


Input Type Radio

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

Radio buttons let a user select ONLY ONE of a limited number of choices:

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 how the HTML code above will be displayed in a browser:

Radio Buttons

The input type=”radio” defines a radio button:

Choose your favorite Web language:

   
   
   


Input Type Checkbox

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

Checkboxes let a user select ZERO or MORE choices of a limited 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 how the HTML code above will be displayed in a browser:

Checkboxes

The input type=”checkbox” defines a checkbox:






Input Type Button

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

Example

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

This is how the HTML code above will be displayed in a browser:

Input Button


Input Type Color

The <input type="color"> is used for input fields that ought to contain a color.

Depending upon browser support, a color picker can appear in the input field.

Example

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

Show a Color Picker

The input type=”color” is used for input fields that should contain a color.

Note: type=”color” is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).

Input Type Date

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

Depending upon browser support, a date picker can appear in the input field.

Example

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

Date Field

The input type=”date” is used for input fields that should contain a date.

Note: type=”date” is not supported in Safari or Internet Explorer 11 (or earlier).

You can likewise use the min and max attributes 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>

Date Field Restrictions

Use the min and max attributes to add restrictions to dates:





Note: type=”date” is not supported in Safari or Internet Explorer 11 (or earlier).


Input Type Datetime-local

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

Depending upon browser support, a date picker can appear in the input 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 used for input fields that ought to contain an email address.

Depending upon browser support, the email address can be automatically approved when submitted.

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

Example

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

Email Field

The input type=”email” is used for input fields that should contain an e-mail address:


Input Type File

The <input type="file"> defines a file-select field and a “Browse” button for file uploads.

Example

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

File upload

Show a file-select field which allows a file to be chosen for upload:




Input Type Hidden

The <input type="hidden"> defines a hidden input field (not noticeable to a user).

A hidden field let web developers incorporate data that can’t be seen or modified by users when a form is submitted.

A hidden field frequently stores what database record that should be updated when the form is submitted.

Note: While the value isn’t shown to the user in the page’s substance, it is apparent (and can be edited) using any browser’s developer tools or “View Source” usefulness. Try not to use hidden inputs as a form of security!

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>

A Hidden Field (look in source code)



Note: The hidden field is not shown to the user, but the data is sent when the form is submitted.


Input Type Month

The <input type="month"> allows the user to choose a month and year.

Depending upon browser support, a date picker can appear in the input 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"> defines a numeric input field.

You can likewise set limitations on what numbers are acknowledged.

The accompanying example shows a numeric input field, where you can enter a value 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>

Number Field

The input type=”number” defines a numeric input field.

You can use the min and max attributes to add numeric restrictions in the input field:


Input Restrictions

Here is a list of some common input restrictions:

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 learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value 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"> defines a control for entering a number whose exact value isn’t significant (like a slider control). Default range is 0 to 100. Nonetheless, you can set limitations on what numbers are acknowledged with the min, max, and step attributes:

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 used for search fields (a search field behaves like a regular text field).

Example

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

Search Field

The input type=”search” is used for search fields (behaves like a regular text field):


Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone 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>

Telephone Field

The input type=”tel” is used for input fields that should contain a telephone number:





Format: 123-45-678


Input Type Time

The <input type="time"> allows the user to choose a time (no time zone).

Depending upon browser support, a time picker can appear in the input field.

Example

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

Show a Time Input Control

The input type=”time” allows the user to select a time (no time zone):

If the browser supports it, a time picker pops up when entering the input field.

Note: type=”time” is not supported in Safari or Internet Explorer 12 (or earlier).


Input Type Url

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

Depending upon browser support, the url field can be automatically 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>

Display a URL Input Field

The input type=”url” is used for input fields that should contain a URL address:


Input Type Week

The <input type="week"> allows the user to choose a week and year.

Depending upon browser support, a date picker can appear in the input field.

Example

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

Display a Week Input Control

The input type=”week” allows the user to select a week and year.

If the browser supports it, a date picker pops up when entering the input field.

Note: type=”week” is not supported in Firefox, Safari or Internet Explorer 11 (or earlier).


HTML Input Type Attribute

TagDescription
<input type=””>Specifies the input type to display

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder