HTML Input Types

HTML form input types are discussed in this section. The HTML <input> element has several types that are discussed in this chapter.

Listed below are the different types of HTML form inputs that 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: A helpful hint about HTML form input types is that the “text” value of the type property is always used as the default.

The Input Type Text:

A single-line text input field is determined by the <input type=”text”> attribute in html input type :


<!DOCTYPE html> <html> <body> <form><label for="fname">Owner 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></body> </html>

A browser will display the HTML code above as follows:

First name:

Last name:

The text input can also be limited like you can set the max character to be filled. See example below:


<!DOCTYPE html> <html> <body> <form> <div> <label for="choose">Which book you prefer a Ulysses or a lolita?</label> <input type="text" id="choose" name="fav" required minlength="7" maxlength="7"> </div> <div> <button>Submit</button> </div> </form> </body> </html>

Html Input Type Password:

When we use <input type=”password”> in HTML forms, a password field is created as follows:


<!DOCTYPE html> <html> <body><form> <label for="username">Your Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Your Password:</label><br><input type="password" id="pwd" name="pwd"> </form></body> </html>

Here is how the HTML code above will appear in a browser:



Note: Masking is applied to hide characters in password fields ( displayed as asterisks or circles).

Password type can also be limited to the minimum and maximum length and also define the password input. See the example below:


<!DOCTYPE html> <html> <body> <form> <label for="number">PIN:</label> <input id="number" type="password" inputmode="numeric" minlength="6" maxlength="11" size="11"> <div> <button>Submit</button> </div> </form> </body> </html>

Input Type Reset:

Utilizing the HTML form <input type=”reset”>, you can modify all form values to their default values by clicking the reset button:


<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php"> <label for="fname">Owner First name:</label><br> <input type="text" id="fname" name="fname" value="Elon"><br> <label for="lname">Last name:</label><br> </form></body></html>

Below is an example of how the HTML code we have written will look in a web browser:

First name:

Last name:

In HTML form input types, if you alter the input values and then click the “Reset” button, the form data will be set back to the default values if you change the input values and click the Reset button.

Input Type Submit:

<input type=”submit”> provides a button for sending form data to a form handler in HTML form input types.

A server page containing a script for processing input data serves as the form handler in most cases.

The action property of the form indicates the form-handler:

The varieties of HTML form input are shown here!


<!DOCTYPE html> <html> <body><form action="/action-attributes-page.php"> <label for="fname">Owner First name:</label><br> <input type="text" id="fname" name="fname" value="Elon"><br> <label for="lname">Last name:</label><br> </form></body></html>

A browser will render the HTML code above as follows:

First name:

Last name:

You will get the following default text if you ignore the value attribute for the submit button when it comes to html input type:


<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php"> <label for="fname">Owner First name:</label><br> <input type="text" id="fname" name="fname" value="Elon"><br> <label for="lname">Last name:</label><br> </form></body></html>

Input Type Checkbox:

A checkbox is specified using the <input type=”checkbox”> tag in an HTML form.

Users can select ZERO or MORE options from a limited number of options using checkboxes.


<!DOCTYPE html> <html> <body><form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Tesla Truck"> </form></body></html>

A browser will render the HTML code above as follows:

The checkbox is also validated using Javascript like we see in our daily life forms that there is the terms and condition checkbox and we have to read and mark it up for continuing forward. Here is an example how it is done:


<!DOCTYPE html> <html> <head> <script> function checkForm(form) { if(!form.terms.checked) { alert("Please read out the terms and condition and check it to move forward"); form.terms.focus(); return false; } return true; } </script> </head> <body> <form onsubmit="return checkForm(this);"> <p><input type="checkbox" name="terms"> I accept the <u>Terms and Conditions</u></p> <p><input type="submit"></p> </form> </body> </html>

Input Type Radio:

A radio button is specified by the HTML form input type <input type=”radio”>.

A user may only pick Single option from a small list of options using radio buttons:


<!DOCTYPE html> <html> <body><form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> </body></html>

As you can see, a browser displays the HTML code as follows:

Radio buttons can also be validated with the help of javascript. In case the user forgets to select the radio button it will pop up the alet msg. See the example below:


<!DOCTYPE html> <html> <head> <script> function ValidateForm(form){ ErrorText= ""; if ( ( form.gender[0].checked == false ) & ( form.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; } if (ErrorText= "") { form.submit() } } </script> </head> <body> <form name="feedback" action="#" method="post"> Your Gender: <input type="radio" name="gender" value="Male"> Male <input type="radio" name="gender" value="Female"> Female <input type="button" name="SubmitButton" value="Submit" onclick="ValidateForm(this.form)"> <input type="reset" value="Reset"> </form> </body> </html>

Input Type Button:

A button is established as an HTML form input with the tag <input type=”button”>.


<!DOCTYPE html> <html> <body> <form><input type="button" onclick="alert('Hello World!')" value="Click Here"></form> </body> </html>

In a web browser, the preceding code will look like this:

The is button has a property of disabled like you can add a button but it will not work because it actually disabled. See example below:


<!DOCTYPE html> <html> <head> </head> <body> <form> <p>User Name: <input type="text" name="uname"></p> <p> <input type="submit" value="Submit"> <input type="button" value="Check " disabled> </p> </form> </body> </html>

Input Type Date:

When it comes to input types for HTML forms, the <input type=”date”> tag is the one that’s used for fields that need to include a date.

A date picker may or may not appear in the input field, depending on the functionality provided by the browser.


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

If you want to add restrictions to dates, you can use the min and max attributes as follow:


<!DOCTYPE html> <html> <body><form> <label for="datemax">Put a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Put a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form></body> </html>

Input Type Color:

When it comes to input types for HTML forms, the <input type=”color”> tag is the one that’s used for fields that need to hold a color.

A color picker may or may not appear in the input field, depending on the capabilities offered by the browser as it comes to html input type.


<!DOCTYPE html> <html> <body><form> <label for="favcolor">Select your favorite Tesla truck color:</label> <input type="color" id="favcolor" name="favcolor"> </form> </body></html>

Input Type Number:

A numeric input field is defined by the <input type=”number”> tag. It is also possible to set restrictions on what numbers are accepted.

Here is an example of a numeric input field that can receive values from 1 to 5:


<!DOCTYPE html> <html><body><br><br><br><br><div class="form"><br><br><form><br><label for="quantity">Quantity (between 1 and 5):</label><br><br><br><input type="number" id="quantity" name="quantity" min="1" max="5"><br></form><br><br></div><br><br><br> </body></html>

A numeric input field can be set to default value so it represents a integer to placed in it. See example below:


<!DOCTYPE html> <html> <head> </head> <body> <form> <label for="slots">Number of slots you would like to pick:</label> <input id="slots" type="number" name="slots" value="0"> </form> </body> </html>

Input Type Datetime-local:

The <input type=”datetime-local”> tag denotes a date and time input field that does not take into account the current time zone.

It is possible for a date picker to appear in the input field of HTML form input types; however, this is dependent on the browser support.


<!DOCTYPE html> <html> <body><form> <label for="Your Sister/Brother Birthday">Siblings Birthday(date and time):</label><br> <input type="datetime-local" id="Your Sister/Brother Birthday" name="Your Sister/Brother Birthday"> </form></body> </html>

Input Type File:

For the purpose of uploading files, the <input type=”file”> tag creates a file-selection field and a button labeled “Browse.”


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="myfile">Choose your file:</label><br><br><br><br><input type="file" id="myfile" name="myfile"><br></form><br><br> </body></html>

The file input can be specified which file will be acceptable you can define the format youself. See example below:


<!DOCTYPE html> <html><body><br><br><br><br><br><form><br><label for="picture">Choose your picture:</label><br><input type="file" id="picture" name="picture" accept="image/png, image/jpeg"><br><input type="submit" value="submit"><br></form><br><br><br> </body></html>

Input Type Email:

For text boxes where an email address should be entered, use the <input type=”email”> tag.

It is possible for browsers to do an automated validation of the email address upon submission.

Several smart phones can tell when you’re trying to send an email, and they’ll automatically append “.com” to the keypad.


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="email">Type your email address:</label><br><br><br><br><input type="email" id="email" name="email"><br></form><br><br> </body></html>

The emails can or cannot be correct sometimes. You can place the pattern in your input field so that the valid emails can be put in it.
Here is how its done:


<!DOCTYPE html> <html><body><br><br><br><br><br><form><br><div class="emailBox"><br><label for="emailAddress">Your email address</label><br><br><input>id="emailAddress"<br>type="email"<br>size="32"<br>maxlength="32"<br>required<br>placeholder="[email protected]"<br>pattern=".+@.+\.com"<br>title="Please provide valid email address" /><br></div><br><input type="submit" value="Send"><br></form><br><br> </body></html>

Input Type Month:

The user is given the option of selecting both the month and the year through the <input type=”month”>.

A date picker may or may not appear in the input field, depending on the browser’s capabilities.


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="bdaymonth">Birthday (month and year):</label><br><br><br><br><input type="month" id="bdaymonth" name="bdaymonth"><br></form><br><br> </body></html>

Month input can be set to min and max date. Here is how we can do that:


<!DOCTYPE html> <html><body><br><br><br><br><br><form><br><label for="bday-month">what is your birth date?</label><br><input>id="bday-month"<br>type="month"<br>name="bday-month"<br>min="1991-01"<br>max="2010-09" /><br></form><br><br> </body></html>

Input Restrictions:

Some common input restrictions can be found in the following list:

minAn input field’s minimum value.
checkedWhen the page loads, an input field should be pre-selected (for type=”checkbox” or type=”radio”).
disabledA disabled input field is specified.
patternChecks the input value against a regular expression.
requiredA required input field (must be filled out).
sizeAn input field’s width is calculated in characters.
stepProvide an input field with legal number intervals.
valueAn input field’s default value.
readonlyMake an input field read-only (not editable).
maxSets the maximum value for an input field.
maxlengthLimit input fields to a certain number of characters.

Next, you will learn about input restrictions.

An example of an input field with a numeric value range of 0 to 100, in 10 step increments, appears below. 30 is the default value:


<!DOCTYPE html> <html> <body> <h2>Numeric Steps</h2> <p>Depending on browser support: Fixed steps will apply in the input field.</p> <form action="/action_page.php"> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> <input type="submit" value="Submit"> </form> </body> </html>

For search fields, the <input type=”search”> is used (search fields behave like regular text fields).


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="gsearch">Search Google:</label><br><br><br><br><input type="search" id="gsearch" name="gsearch"><br></form><br><br> </body></html>

Input Type Range:

An <input type=”range”> allows you to enter a number whose exact value is not relevant.

There is a default range of 0 to 100.

In combination with the min, max, and step attributes, however, you can restrict which numbers are acceptable:


<!DOCTYPE html> <html><body><br><br><br><br><div class="range"><br><br><form><br><label for="vol">Volume (between 0 and 50):</label><br><br><br><input type="range" id="vol" name="vol" min="0" max="50"><br></form></div><br><br> </body></html>

Input Type Tel:

Input fields containing telephone numbers should use the <input type=”tel”>.


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

Input Type Time:

Users can select a time by selecting an <input type=”time”> (there is no time zone option).

Input fields can display a time picker depending on browser support.


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="appt">Select a time:</label><br><br><br><br><input type="time" id="appt" name="appt"><br></form><br><br> </body></html>

The time input range can be set using the min and max value here is how:


<!DOCTYPE html> <html> <head> </head> <body> <form> <label for="gtime">Pick a time for going:</label> <input type="time" id="gtime" name="gtime" min="09:00" max="17:00" required> <small>Pickup timings are 9am to 5pm</small> </form> </body> </html>

Input Type Week:

The user can choose a week and year with the <input type=”week”>.

Input fields can include a date picker depending on browser support.


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="week">Select a week:</label><br><br><br><br><input type="week" id="week" name="week"><br></form><br><br> </body></html>

Input Type Url:

Using the <input type=”url”> ensures that URL addresses are included in input fields.

When the url field is submitted, the browser can automatically validate it.

To match url input, some smartphones add “.com” to the keyboard.


<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="landingpage">Add your landingpage:</label><br><br><br><br><input type="url" id="landingpage" name="landingpage"><br></form><br><br> </body></html>

HTML Input Type Attribute:

<input type=””>Indicates what type of input should be rendered

Benefits of HTML Input Types

HTML input types are powerful attributes used to create input fields that can accept various types of data. They offer numerous benefits that make them an essential tool for web developers.

  • Improved User Experience : HTML input types provide an intuitive user interface that enables users to input data quickly and efficiently, resulting in a better user experience. Users can easily and accurately input data, reducing frustration and increasing satisfaction.
  • Reduced Development Time: HTML input types come pre-built with functionality, allowing developers to save time by avoiding the need to create custom input fields. This reduces development time and speeds up the process of creating web pages.
  • Cross-Platform Compatibility: HTML input types are supported by most web browsers, providing cross-platform compatibility. This ensures that users can access web pages irrespective of the device used. The same input type will work seamlessly on different platforms, eliminating the need for developers to create different input fields for different devices.
  • Validation: HTML input types offer in-built validation, preventing users from submitting incorrect data. This saves time and enhances the accuracy of data collected. Developers can set up specific validation rules, such as required fields, minimum and maximum length, and data format, ensuring that data is entered correctly.
  • Enhanced Security: HTML input types such as password and email fields are designed to secure sensitive information, ensuring that it is not easily accessed by unauthorized individuals. This helps to protect user data and prevent identity theft.
  • Improved Accessibility: HTML input types can include labels and other elements that improve web page accessibility by providing additional information for screen readers and other assistive technologies. This ensures that users with disabilities can access and use web pages effectively.
  • Easy Integration: HTML input types can easily integrate with JavaScript and other web technologies, enabling developers to add advanced functionality to web pages. This allows for the creation of dynamic web pages with advanced features and interactivity.
If you want to be in touch with the technical knowledge on this site, do subscribe to our Newsletter below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *