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

0
85
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.

Code

Number type input in HTML

Output

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.

Code

Min and max attrubute in Number

Output

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.

Code

Data type input

Output

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.

Code

min and max attribute in date

Output

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.

Code

week and month input types

Output

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.

Code

Time type input in HTML Form

Output

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here