DEV Community

Cover image for 5 things you need to know about <Input> tag

5 things you need to know about <Input> tag

Fidal Mathew on May 28, 2022

Hi folks, how are you holding up? I hope you’re doing good. In this blog, I’m gonna share some properties about the &lt;input&gt; tag that I wish I...
Collapse
 
vulcanwm profile image
Medea

Wow I didn't know about autofocus!

Collapse
 
fidalmathew profile image
Fidal Mathew

Now, you know! 😁

Collapse
 
fidalmathew profile image
Fidal Mathew

Autocomplete aren't necessary for all inputs, like writing comments, blogs. You don't want autocomplete option. Otherwise, its good to have, I guess.
Thanks for sharing your insights btw :)

Collapse
 
sem1colons profile image
Youssef Abdulaziz

What's the difference between using select tag and the last point above ?

Collapse
 
fidalmathew profile image
Fidal Mathew

In the input tag, you have a writing space. Here, you can choose the option or type to get the closest option available in the list.
Whereas, in select tag, you only have the option to choose from the list.

Collapse
 
eshimischi profile image
eshimischi • Edited

Autocomplete=off * (without dash, developer.mozilla.org/en-US/docs/W...)

Collapse
 
fidalmathew profile image
Fidal Mathew

Thank you for sharing, I will correct this out in the article 😄

Collapse
 
eshimischi profile image
eshimischi

Not to confuse anyone 🤝

Thread Thread
 
fidalmathew profile image
Fidal Mathew

🤝Cheers!

Collapse
 
jwhenry3 profile image
Justin Henry

I love the datalist option. If you don't care about the appearance of the datalist, then it would be a faster alternative to using the framework library code to accomplish the same goal

Collapse
 
fidalmathew profile image
Fidal Mathew

True!! You could also give select tag a try :)

Collapse
 
jwhenry3 profile image
Justin Henry

The reason I mentioned the datalist was for the autocomplete functionality though

Thread Thread
 
fidalmathew profile image
Fidal Mathew

Gotcha, then datalist is the only option. Then if UI does'nt match your needs, using frameworks is the best option as you said Justin. 🙂

 
fidalmathew profile image
Fidal Mathew

Gotcha 👍, will keep in mind!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Great tips!

Collapse
 
fidalmathew profile image
Fidal Mathew

Glad you liked it! 😊

Collapse
 
codeystein profile image
codeyStein

Very usefull, thank you!

Collapse
 
fidalmathew profile image
Fidal Mathew

Glad you liked it :)

Collapse
 
edindevto profile image
Ed is Taking Note

I didn't know about data list ! This must help me safe lot of code.
Thanks!! ❤️

Collapse
 
fidalmathew profile image
Fidal Mathew

Anytime! 🥰