Membuat Floating Label Input Menggunakan HTML dan CSS

Membuat Floating Label Input Menggunakan HTML dan CSS – Pada tutorial kali ini, kita akan membuat floating label input menggunakan HTML dan CSS. Kamu akan membuat floating label input seperti gambar dibawah.

floating label input
floating label input

Untuk membuat floating label input ternyata cukup mudah dilakukan menggunakan HTML dan CSS saja. Yak, HTML dan CSS saja tanpa menggunakan Javascript. Gimana caranya? Simak bagaimana cara membuat floating label input menggunakan HTML dan CSS dibawah.

Pertama, kamu buat tampilan HTML sederhana seperti dibawah.

label input sederhana
label input sederhana

Kamu akan memiliki struktur kode HTML yang mirip seperti berikut dimana akan terdapat dua buah label input untuk email dan password.

 

<html>
<head>
  <title>Membuat Floating Label Input Menggunakan HTML dan CSS</title>
</head>
<body>
  <div class="container">
    <form>
      <div class="input-form">
        <input type="text" name="email" id="email" placeholder="Masukkan Email Anda" />
        <label for="email">Email Address</label>
      </div>
      
      <div class="input-form">
        <input type="password" name="password" id="password" placeholder="Masukkan Password Anda" />
        <label for="password">Password</label>
      </div>
    </form>
  </div>
</body>
</html>

 

Kedua, buat style CSS seperti berikut untuk membuat floating label input.

 

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.container {
  width: 300px;
  margin: 0 auto;
}

.input-form {
  display: flex;
  flex-direction: column-reverse;
  margin: 1.2em 0;
}

input, label {
  transition: 0.4s ease;
}

label {
  padding-left: 10px;
  transform: translate(4px, -14px) scale(1.02);
  margin-bottom: 2px;
  cursor: text;
  transform-origin: left top;
  color: #757575;
  position: absolute;
}

input {
  font-size: 1.2em;
  padding: 30px 10px 10px 10px;
  border: none;
  border-bottom: 2px solid #9e9e9e;
  outline: none;
  border-radius: 5px 5px 0px 0px;
}

input::placeholder {
  opacity: 0;
}

input:focus, input:not(:placeholder-shown) {
  border-bottom: 2px solid #000000;
}


input:not(:placeholder-shown) ~ label, input:focus ~ label {
  transform: translate(10px, -35px) scale(0.8);
  padding-left: 0px;
  color: black;
}

 

Nah, untuk melihat hasilnya dapat melihatnya melalui JSfiddle berikut.

Sekian, tutorial membuat floating label input menggunakan HTML dan CSS. Tunggu, tutorial menarik lainnya hanya di inpows.com

Avatar
Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com
Back To Top