DEV Community

Anurag Gharat
Anurag Gharat

Posted on

5 HTML Input types you are missing!

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!

  1. input type ="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.
    HTML Input type = color

  2. input type ="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.
    HTML Input type = search

  3. input type="tel":
    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.
    HTML Input type = tel

  4. input type="datetime-local":
    This input type allows user to select Time, Date, Month and Year.
    HTML Input type = date and time

  5. input type="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.
    HTML Input type = range

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

Discussion (8)

Collapse
pcjmfranken profile image
Peter Franken • Edited on

For bonus points, combine with the inputmode property that lets you control the type of keyboard that's rendered on mobile devices :)

Here's a demo: better-mobile-inputs.netlify.app/

Fat-Finger-proof numerical keyboard on your type="text" input fields, how cool is that!

Edit: Some more mobile input field UX goodies: smashingmagazine.com/2018/08/ux-ht...

Collapse
anuraggharat profile image
Anurag Gharat Author

Thanks for this!

Collapse
thumbone profile image
Bernd Wechner

This is great. I'd give you bonus points if you included a sample of each input in the article!

Collapse
valbuena profile image
valbuena

this is super cool

Collapse
alco profile image
Jakub Stibůrek

Thanks for the article. I didn't know about these.

Collapse
adam_cyclones profile image
Adam Crockett

Add a datalist to supercharge all of these

Collapse
anuraggharat profile image
Anurag Gharat Author

Yeah I wrote a separate thread on twitter on using datalist! Super useful when you wish to provide predefined choices to the user!

Collapse
medan_in_code profile image
MedanInCode

Nice Post