logo

On This Page

Input Validation

Labelled Input (without placeholder)

Labelled Input (with placeholder)

Input-Fields

Inputs are used to take information from the user to authenticate or save their information to the server.

Input Validation

Wrong Input Validation 

<!-- outline wrong input email validation -->
<div class="outline-email-input wrong-input">
  <label for="email">Email *
    <input type="email" name="email" value="abc.com" required autocomplete="email" />
    entered email is invalid
  </label>
</div>

<!-- outline wrong password validation -->
<div class="outline-password-input wrong-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" required value="..." />
    wrong password, try again
  </label>
</div>

Success Input Validation 

<!-- outline input email field without placeholder -->
<div class="outline-email-input success-input">
  <label for="email">Email *
    <input type="email" name="email" value="abc@pebbleui.com" required autocomplete="email" />
  </label>
</div>

<!-- outline input password field without placeholder -->
<div class="outline-password-input success-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" required value=".........." />
    Password Matched!
  </label>
</div>

Labelled Input (without placeholder)

Outline 

<!-- outline input text field without placeholder -->
<div class="outline-text-input">
  <label for="text">Full Name
    <input type="text" name="text" autocomplete="name" />
  </label>
</div>

<!-- outline input email field without placeholder -->
<div class="outline-email-input">
  <label for="email">Email *
    <input type="email" name="email" required autocomplete="email" />
  </label>
</div>

<!-- outline input password field without placeholder -->
<div class="outline-password-input wrong-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" required value="..." />
    wrong password, try again
  </label>
</div>

<!-- outline input number field without placeholder -->
<div class="outline-number-input">
  <label for="number">Number<input type="number" name="number" />
  </label>
</div>

<!-- outline input date field without placeholder -->
<div class="outline-date-input">
  <label for="date">Date<input type="date" name="date" />
  </label>
</div>

<!-- outline input month field without placeholder -->
<div class="outline-month-input">
  <label for="month">Month & Year<input type="month" name="month" />
  </label>
</div>

<!-- outline input file field without placeholder -->
<div class="outline-file-input">
  <label for="file">File<input type="file" name="file" />
  </label>
</div>

<!-- outline input telephone field without placeholder -->
<div class="outline-tel-input">
  <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" />
  </label>
</div>

<!-- color input field  -->
<div class="color-input">
  <label for="color">Color :<strong><output id="color">#0f96df</output></strong>
    <input type="color" name="color" class="color-pick" oninput="color.value=this.value" value="#0f96df" />
  </label>
</div>

<!-- outline input search field without placeholder -->
<div class="outline-search-input">
  <label for="search">Search
    <div class="input-icon">
      <a href=""><i class="fas fa-search"></i></a>
      <input type="search" name="search" />
    </div>
  </label>
</div>

<!-- range input field -->
<div class="range-input">
  <label for="volume">Volume<input type="range" min="0" max="100" value="40" name="volume" step="1"
      oninput="vol.value = this.value" />
    <output id="vol">40</output>
  </label>
</div>

<!-- radio input field -->
<div class="radio-input">
  <input type="radio" name="radio" /><label for="radio">Radio input field</label>
</div>

<!-- checkbox input field -->
<div class="checkbox-input">
  <input type="checkbox" name="check" /><label for="check">Check input field</label>
</div>

No outline 

<!-- no-outline input text field without placeholder -->
<div class="no-outline-text-input">
  <label for="text">Full Name
    <input type="text" name="text" autocomplete="name" />
  </label>
</div>

<!-- no-outline input email field without placeholder -->
<div class="no-outline-email-input">
  <label for="email">Email *
    <input type="email" name="email" required autocomplete="email" />
  </label>
</div>

<!-- no-outline input password field without placeholder -->
<div class="no-outline-password-input wrong-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" required value="..." />
    wrong password, try again
  </label>
</div>

<!-- no-outline input number field without placeholder -->
<div class="no-outline-number-input">
  <label for="number">Number<input type="number" name="number" />
  </label>
</div>

<!-- no-outline input date field without placeholder -->
<div class="no-outline-date-input">
  <label for="date">Date<input type="date" name="date" />
  </label>
</div>

<!-- no-outline input month field without placeholder -->
<div class="no-outline-month-input">
  <label for="month">Month & Year<input type="month" name="month" />
  </label>
</div>

<!-- no-outline input file field without placeholder -->
<div class="no-outline-file-input">
  <label for="file">File<input type="file" name="file" />
  </label>
</div>

<!-- no-outline input telephone field without placeholder -->
<div class="no-outline-tel-input">
  <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" />
  </label>
</div>

<!-- no-outline input search field without placeholder -->
<div class="no-outline-search-input">
  <label for="search">Search
    <div class="input-icon">
      <a href=""><i class="fas fa-search"></i></a>
      <input type="search" name="search" />
    </div>
  </label>
</div>

Labelled Input (with placeholder)

Outline 

<!-- outline input text field with placeholder -->
<div class="outline-text-input">
  <label for="text">Full Name
    <input type="text" name="text" autocomplete="name" placeholder="Enter name" />
  </label>
</div>

<!-- outline input email field with placeholder -->
<div class="outline-email-input">
  <label for="email">Email *
    <input type="email" name="email" required autocomplete="email" placeholder="Enter email" />
  </label>
</div>

<!-- outline input password field with placeholder -->
<div class="outline-password-input wrong-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" placeholder="Enter password"
      required value="..." />
    wrong password, try again
  </label>
</div>

<!-- outline input number field with placeholder -->
<div class="outline-number-input">
  <label for="number">Number<input type="number" name="number" placeholder="Enter quantity" />
  </label>
</div>

<!-- outline input date field with placeholder -->
<div class="outline-date-input">
  <label for="date">Date<input type="date" name="date" />
  </label>
</div>

<!-- outline input month field with placeholder -->
<div class="outline-month-input">
  <label for="month">Month & Year<input type="month" name="month" />
  </label>
</div>

<!-- outline input file field with placeholder -->
<div class="outline-file-input">
  <label for="file">File<input type="file" name="file" />
  </label>
</div>

<!-- outline input telephone field with placeholder -->
<div class="outline-tel-input">
  <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" placeholder="Enter phone number" />
  </label>
</div>

<!-- outline input search field without placeholder -->
<div class="outline-search-input">
  <label for="search">Search
    <div class="input-icon">
      <a href=""><i class="fas fa-search"></i></a>
      <input type="search" name="search" placeholder="Search" />
    </div>
  </label>
</div>

No outline 

<!-- no-outline input text field with placeholder -->
<div class="no-outline-text-input">
  <label for="text">Full Name
    <input type="text" name="text" autocomplete="name" placeholder="Enter name" />
  </label>
</div>

<!-- no-outline input email field with placeholder -->
<div class="no-outline-email-input">
  <label for="email">Email *
    <input type="email" name="email" required autocomplete="email" placeholder="Enter email" />
  </label>
</div>

<!-- no-outline input password field with placeholder -->
<div class="no-outline-password-input wrong-password">
  <label for="password">Password *
    <input type="password" name="password" autocomplete="current-password" placeholder="Enter password"
      required value="..." />
    wrong password, try again
  </label>
</div>

<!-- no-outline input number field with placeholder -->
<div class="no-outline-number-input">
  <label for="number">Number<input type="number" name="number" placeholder="Enter quantity" />
  </label>
</div>

<!-- no-outline input date field with placeholder -->
<div class="no-outline-date-input">
  <label for="date">Date<input type="date" name="date" />
  </label>
</div>

<!-- no-outline input month field with placeholder -->
<div class="no-outline-month-input">
  <label for="month">Month<input type="month" name="month" />
  </label>
</div>

<!-- no-outline input file field with placeholder -->
<div class="no-outline-file-input">
  <label for="file">File<input type="file" name="file" />
  </label>
</div>

<!-- no-outline input telephone field with placeholder -->
<div class="no-outline-tel-input">
  <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" placeholder="Enter phone number" />
  </label>
</div>

<!-- no-outline input search field with placeholder -->
<div class="no-outline-search-input">
  <label for="search">Search
    <div class="input-icon">
      <a href=""><i class="fas fa-search"></i></a>
      <input type="search" name="search" placeholder="Search" />
    </div>
  </label>
</div>