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!
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.
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.
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.
input type="datetime-local":
This input type allows user to select Time, Date, Month and Year.
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.
Make sure you try them in your next project! Good luck!
Oldest comments (7)
For bonus points, combine with the
inputmodeproperty 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...
Thanks for this!
Thanks for the article. I didn't know about these.
Add a datalist to supercharge all of these
Yeah I wrote a separate thread on twitter on using datalist! Super useful when you wish to provide predefined choices to the user!
Nice Post
This is great. I'd give you bonus points if you included a sample of each input in the article!