<form class="form">
  <div class="form__group">
    <input type="text" id="firstname" class="form__control" name="firstname">
    <label for="firstname" class="form__label">Firstname</label>
  </div>
  <div class="form__group">
    <input type="text" id="lastname" class="form__control" name="lastname">
    <label for="lastname" class="form__label">Lastname</label>
  </div>
  <div class="form__group">
    <input type="email" id="email" class="form__control" name="email" value="mail@example.com">
    <label for="email" class="form__label">Email</label>
  </div>
</form>

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.form {
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.form__group {
  position: relative;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
}

.form__group.form__group--active > .form__label {
  top: 0;
}

.form__group:not(:last-child) {
  margin-bottom: 10px;
}

.form__label {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  transition: top 0.15s ease-in-out, color 0.15s ease-in-out;
}

.form__control {
  height: 40px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #222222;
  box-sizing: border-box;
  font: inherit;
  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form__control:focus {
  border-bottom: 1px solid #4169e1;
  box-shadow: 0 1px 0 0 #4169e1;
  outline: none;
}

.form__control:focus + .form__label {
  top: 0;
  color: #4169e1;
}

const init = () => {
  const forms = document.querySelectorAll('.form');

  for (const form of forms) {
    const groups = form.querySelectorAll('.form__group');

    for (const group of groups) {
      const control = group.querySelector('.form__control');

      if (control.value.length > 0) {
        group.classList.add('form__group--active');
      }

      control.addEventListener('input', () => {
        if (control.value.length > 0) {
          group.classList.add('form__group--active');
        } else {
          group.classList.remove('form__group--active');
        }
      });
    }
  } 
};

window.addEventListener('DOMContentLoaded', init);