Html Code for Input Field With Icon:-

Html is used for drawing the layout of the website. Before going through the html code go through the basic concepts of html like div, span, input tag, and icon tag.

For icons, we are using font awesome icons cdn(content-delivery-network).

In this div class will be input fields with icons and input types will be text and a placeholder is your name just like that we want to change the input type and input text.

<div class="inputWithIcon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon">
  <input type="text" placeholder="Email">
  <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon">
  <input type="text" placeholder="Phone Number">
  <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Email">
  <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Phone Number">
  <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>
<input type="text" placeholder="Age">

Html output input icon:-

This is the output of the html code. But still, it is not looking so good because we have not applied styles to it.

Ecommerce Website Using Html Css And Javascript Source Code

Css Code For Input Field With Icon:-

Css is used for styling the layout /html of the website. Here we are using basic properties of styling like border-box, transition,css selectors, and pseudo-classes.

The position the property specifies the type of positioning method used for an element (static, relative, fixed, absolute, or sticky).

The position property

The position the property specifies the type of positioning method used for an element.

There are five different position values:

Static
Relative
Fixed
Absolute
Sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

Position: relative;

An element  position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: absolute positioned elements are removed from the normal flow, and can overlap elements.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

What are pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
The :focus the selector is used to select the element that has focus. Tip: the: focus selector is allowed on elements that accept keyboard events or other user inputs.

Css [attribute] selector

The [attribute] the selector is used to select elements with a specified attribute.

Css [attribute=”Value”] selector

The [attribute=”Value”] selector is used to select elements with a specified attribute and value.

Here we want to add font awesome icons css.
We also want to design html with css with input icons for Gmail, etc.

/*Don't forget to add Font Awesome CSS : "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"*/
input[type="text"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
}
input[type="text"]:focus {
    border-color: dodgerBlue;
    box-shadow: 0 0 8px 0 dodgerBlue;
}
.inputWithIcon input[type="text"] {
    padding-left: 40px;
}
.inputWithIcon {
    position: relative;
}
.inputWithIcon i {
    position: absolute;
    left: 0;
    top: 8px;
    padding: 9px 8px;
    color: #aaa;
    transition: 0.3s;
}
.inputWithIcon input[type="text"]:focus + i {
    color: dodgerBlue;
}
.inputWithIcon.inputIconBg i {
    background-color: #aaa;
    color: #fff;
    padding: 9px 4px;
    border-radius: 4px 0 0 4px;
}
.inputWithIcon.inputIconBg input[type="text"]:focus + i {
    color: #fff;
    background-color: dodgerBlue;
}

50+ Html ,Css & Javascript Projects With Source Code

Finally, your INPUT TEXT is done. You can input your name, email phone number age. Its used for signup or login forms.
I hope you liked this blog. If you have any queries or doubts related to the blog or any project or web development please feel free to let us know in the comment section.

Thank you…….

Written by Sayali Kharat & Himanshu Singh