DEV Community

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

Posted on • Updated on

5 things you need to know about <Input> tag

Hi folks, how are you holding up? I hope you’re doing good. In this blog, I’m gonna share some properties about the <input> tag that I wish I’d known sooner.

1. Focus:

The :focus selector comes into action when we click the input element and we can type content in the input field.

Suppose we don’t have a border in our <input> tag, we can implement this using:

input {
    border: none;
} 
Enter fullscreen mode Exit fullscreen mode

But, when we begin to type content in our input label, we get those borders back again. So, a simple solution to this problem will be:

input:focus{
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

2. Autocomplete:

Autocomplete helps us to complete input fields, but sometimes it becomes irritating and suggests wrong details. A method to turn off autocomplete would be:

React:

<input type=”text” autoComplete="new-off">
Enter fullscreen mode Exit fullscreen mode

HTML:

<input type=”text” Autocomplete="off">
Enter fullscreen mode Exit fullscreen mode

3. File input:

Sometimes, text content is not what we want to send, it might be images, gifs, videos, etc. We can send this type of data using the type="file" attribute.

<input type="file">
Enter fullscreen mode Exit fullscreen mode

Usually, we use e.target.value to access the input value, but here we can access the file data using e.target.files[0]. It contains the details of the file like its name, path, etc in form of an object.

input file

The "no file chosen" text is black by default, you can change this to any color using input[type='file'].

input[type='file'] {
  color: rgb(255, 255, 255)
}
Enter fullscreen mode Exit fullscreen mode

4. Autofocus

The input autofocus attribute specifies that an input field should automatically get focus when the page loads. Example: While editing/making blogs, when we land on the edit blog page, we would want the input to be in focus.

<input type="text" autofocus>
Enter fullscreen mode Exit fullscreen mode

5. Input list attribute

Want the user to choose from a specific list of options? We can use the list attribute. Let’s look at an example.

<form onSubmit={function}>
  <input list="anime" name="anime">
  <datalist id="anime">
    <option value="Naruto">
    <option value="My Hero Academia">
    <option value="Death Note">
    <option value="Dragon Ball Z">
    <option value="Attack on Titan">
  </datalist>
  <input type="submit" >
</form>
Enter fullscreen mode Exit fullscreen mode

That’s it, folks, I hope you enjoyed these tips and would incorporate these small techniques in your next projects :)

If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

Connect with me on -

Discussion (22)

Collapse
lukeshiru profile image
Luke Shiru

2 things:

  1. You shouldn't remove outline unless you replace it with an equivalent. You're breaking accessibility.
  2. Removing auto-complete produces a bad UX almost always. If an input has an "annoying" auto-complete, that's flagging another issue (bad name for the input, bad type, etc.).

Cheers!

Collapse
fidalmathew profile image
Fidal Mathew Author

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
lukeshiru profile image
Luke Shiru

Comments should be using textareas, and those don't have auto-complete. As I said, you're flagging other issue (using the wrong element). Disabling expected behaviors/flows just annoy the user, so if we are asked by UX/Product to do that, we should push back and offer better alternatives.

Thread Thread
fidalmathew profile image
Fidal Mathew Author

Gotcha 👍, will keep in mind!

Collapse
vulcanwm profile image
Medea

Wow I didn't know about autofocus!

Collapse
fidalmathew profile image
Fidal Mathew Author

Now, you know! 😁

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 Author

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 on

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

Collapse
fidalmathew profile image
Fidal Mathew Author

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 Author

🤝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 Author

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 Author

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. 🙂

Collapse
andrewbaisden profile image
Andrew Baisden

Great tips!

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it! 😊

Collapse
codeystein profile image
codeyStein

Very usefull, thank you!

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it :)

Collapse
aedyucheng 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 Author

Anytime! 🥰