Sometimes, we want to put an icon inside an input element in a form with HTML.
In this article, we’ll look at how to put an icon inside an input element in a form with HTML.
How to put an icon inside an input element in a form with HTML?
To put an icon inside an input element in a form with HTML, we can add an image beside a borderless input.
For instance, we write
<div style="border: 1px solid #DDD;">
<img src="icon.png" />
<input style="border: none;" />
</div>
to add a div with a border.
Then we put an img element and an input side by side.
We remove the border with border: none;
.
Conclusion
To put an icon inside an input element in a form with HTML, we can add an image beside a borderless input.