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;
} 

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 -

• Twitter
• Github
• Linkedin