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;
}
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;
}
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">
HTML:
<input type=”text” Autocomplete="off">
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">
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.
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)
}
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>
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>
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 -
Top comments (20)
Wow I didn't know about autofocus!
Now, you know! 😁
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 :)
What's the difference between using select tag and the last point above ?
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.
Autocomplete=off * (without dash, developer.mozilla.org/en-US/docs/W...)
Thank you for sharing, I will correct this out in the article 😄
Not to confuse anyone 🤝
🤝Cheers!
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
True!! You could also give select tag a try :)
The reason I mentioned the datalist was for the autocomplete functionality though
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. 🙂
Gotcha 👍, will keep in mind!
Great tips!
Glad you liked it! 😊
Very usefull, thank you!
Glad you liked it :)
I didn't know about data list ! This must help me safe lot of code.
Thanks!! ❤️
Anytime! 🥰