HTML Input – How to Insert HTML Inputs (Part 2)

HTML Input

In the last tutorial you learned about basic inputs of HTML. If you did not check that please Go Here and check that. This is the second part of that tutorial. In this tutorial you will learn more input types that can be used in HTML form.

Number Type Input

You can also add number in input type. This will restrict user to only enter numbers in HTML input. If you use this input type it will also add two small buttons that will be used to increase or decrease the value in input field. See example below.


Number type input in HTML


Number type input

Min and Max Attribute in Number Type Input

You can also specify the minimum and maximum value in number input type. Just add min and max attribute in the tag. See Example below.


Min and max attrubute in Number


max value error in HTML inputs

Tel Type Input

You can also use “tel” as input type but this is same as text field. Many people don’t use this a lot because it’s same as the default text field in HTML.

Date Type Input

You can use the Date type to get the date from the user. It’s really helpful because sometimes you need date of birth of user to sign up. You can add this input type and can get a nice looking calendar in your HTML form. See Example below to see how the date input type works.


Data type input


Date type input

Min and Max Attribute in Date Type Input

You can restrict user to enter the date in a range that you want. Suppose you have an online hotel room booking system and you don’t want user to enter date of that day which has passed. So you can use min and max attribute. Note in these attribute always follow the format YEAR-MONTH-DAY. See Example Below.


min and max attribute in date


restricted date and time

Month and Week Type Inputs

Month and Week are available as inputs type separately. Instead of getting everything using date input type you can get week and month separately by using month and week input types. See Example Below.


week and month input types


month and week input types

Time Type Input

There is also another type called time. This is useful when you need a specific time from the user. You can insert it in you form and can get the nice looking time format. See Example below.


Time type input in HTML Form




Please enter your comment!
Please enter your name here