HTML input tag | Learn HTML input Type

The HTML input tag is used to enter data. Input element − a control that allows the user to input data. <input> has no end tag. <input> elements are used within a <form> element. <input type=”text”>, <input type=”email”>, <input type=”search”> and other tag is used to represent a form input control in HTML document.

Below are the types of HTML <input> element

1. Default <input> tag

HTML

<input type="text" class="form-control" placeholder="Enter name">
<input type="email" class="form-control" placeholder="Enter email">

CSS

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

2. Background image in <input> tag

HTML

<input type="text" class="form-control" placeholder="Enter name">
<input type="email" class="form-control" placeholder="Enter email">

CSS

input[type="text"] {
  background: url(../img/user-icon.png) no-repeat scroll 7px 7px;
  padding-left: 40px;
}
input[type="email"] {
  background: url(../img/email-icon.png) no-repeat scroll 7px 7px;
  padding-left: 40px;
}

3. Background icon using font awesome icon

HTML

<div class="input-wrapper">
  <input type="email" class="form-control" placeholder="Enter email">
</div>

CSS

.input-wrapper {
    position: relative;
}
.input-wrapper:before {
  content: '\f0dd';
  font-family: Font Awesome 5 Free;
  font-weight: 900;
  color: #666;
  display: inline-block;
  position: absolute;
  left: 12px;
  top: 8px;
  pointer-events: none;
  font-size: 20px;
}

input[type="email"] {
  padding-left: 40px;
}

/* Font Aswsome 4.7.0 Version */
  content: '\e75a';
  font-family: FontAwesome;

HTML input type

In this tutorial we learn that how to create <input> box with 3 different types that can use in html form.

You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• HTML/CSS