Pernah kan guys kalian lihat tampilan form dengan format berikut :
Tampilan diatas merupakan tampilan form pada aplikasi android yang seringkali kita temui. Title yang dikasih dengan kode warna itu oren tersebut disebut dengan floating label. User Interface atau tampilan aplikasi dengan menggunakan format label floating / melayang tersebut sangat bermanfaat. Berikut beberapa manfaatnya :
Pertama element label akan lebih mudah dibaca dan akan lebih ringkas dalam pembuatan form karena developer tidak perlu menambahkan element html di tiap form input.
Kedua, floating label ini akan mempermudah bagi user yang sudah terbiasa bagi interface mobile untuk berinteraksi di app yang dibangun dengan basis web.
Walaupun diantara beberapa kemudahan tersebut, label melayang di tidak bisa dibuat secara mudah. HTML 5 tidak menyediakan secara langsung dukungan terhadap floting label tersebut. Tidak seperti misalnya dukungan terhadap attribut required yang telah didukung oleh HTML 5 dan banyak browser terkini sehingga dengan menambahkan attribut tersebut anda tidak perlu menyertakan library validasi javascript untuk mengecek input yang harus diisi oleh user.
Ada dua cara dalam menerapkan floating label tersebut :
- Dengan menambahkan library javascript misalnya yang tersedia di alamat berikut : https://datuhealth.github.io/floating-label/
2. Membuat sendiri koding floating tabel tersebut dengan javascript dan css.
Disini kita akan membahas langkah 2 yakni membuat sendiri floating label tersebut dengan javascript dan css.
- Buat file floating-placeholder.js atau tambahkan coding berikut di halaman html dalam block <script> –disini tambahkan </script>
/*Addding placeholder floating*/
$(document).on('focus','input.floating_placeholder, select.floating_placeholder, textarea.floating_placeholder ',function(e){
var placeholder = $(this).attr('placeholder');
var placeholder_dom = '<span class="floating_placeholder" style="display: none;">'+placeholder+'<span>';
if ($(this).prev('span.floating_placeholder').length != 1)
{
$(this).before(placeholder_dom);
$(this).prev().css('color', '#535FFC');
$(this).prev().fadeIn();
}
else {
//$(this).before(placeholder_dom);
$(this).prev().css('color', '#535FFC');
$(this).prev().fadeIn();
}
});
$(document).on('blur','input, select, textarea',function(e){
$(this).prev('span.floating_placeholder').css('color', '#B4B4B4');
//$(this).prev('i').css('color', '');
});
/*End placeholder floating style*/
2. Tuliskan coding css berikut :
span.floating_placeholder { font-size: 12px; display:block }
that’s it silahkan coba sendiri guys….
Apa kamu punya library atau script javascript sendiri… sharing disini dong guys…
