cft
Become a CreatorSign inGet Started

5 HTML Input types you are missing!

Here are 5 HTML Input types that will be very useful for you!


user

Anurag Gharat

4 months ago | 1 min read
Follow

5-html-input-types-missing-udl8q

Input tags in HTML are a way of getting an input from the user. The commonly used input types are text, password, email, number etc.
But there's more to it. Here are 5 input types that every Web Developer must know!

Color

You can now have a color picker in your webpage. How cool is that?? Just set type property as color in input tag. You can also pass a initial color value in value attribute.

<div>

<input type="color" />

</div>

Search

Now this type is similar to regular text type but with a small difference. The input box automatically adds a cross icon after you start typing to clear the input field. This is very handy input type when you want to add a search box field.

<div>

<input type="search" />

</div>

Telephone

Use this type when you want the user to fill a phone number. When accessed through a touch device (phone/tablet) the input type opens up a numerical keyboard.

<div>

<input type="tel" />

</div>

Date and Time

This input type allows user to select Time, Date, Month and Year.

<div>

<input type="datetime-local" />

</div>

Range

This is another alternative for numerical inputs. This allows user to input a numerical value with a slider control. Use min-max attributes to provide a valid range.

<div>

<input type="range" />

</div>

Make sure you try them in your next project! Good luck!

I regularly post Web Development and Programming related content on Twitter. If you are interested do consider following me there. Thanks!!

Upvote


user
Created by

Anurag Gharat

Follow

Senior Software Engineer

A Software Engineer sharing his journey and learning here.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles