Hallo teman-teman apa kabar semuanya, semoga senantiasa baik dan sehat selalu ya teman-teman. Berjumpa lagi dengan saya pada tutorial Dumet School, di artikel kali ini kita akan belajar Cara Membuat Form Search Menarik Dengan Javascript.Yang nanti kita buat adalah sebuah form search, lalu jika text di input kedalam form search maka simbol (x) akan muncul dan bisa di klik. Jika di klik pada simbol (x) maka text yang tadinya di input akan di hapus, ini berguna untuk lebih cepat dalam menghapus text yang di input jika inputan salah tanpa harus menekan backspace. Oke demo nya seperti gambar di bawah ini
Seperti yang kalian lihat form tampak kosong
Jika text di inputkan akan muncul sebuah simbol (x) dan simbol tersebut bisa di klik untuk menghapus semua text yang sudah di inputkan pada form.
Baik kita akan membuatnya seperti demo gambar di atas Cara Membuat Form Search Menarik Dengan Javascript, seperti biasa siapkan text editornya kemudian copy script html di bawah ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Form Search</title> </head> <body> <form id="search-form" action="/search" method="get"> <span class="text-input-wrapper"> <input type="text" name="cari" size="18"><span title="Clear">×</span> </span> <input type="submit" value="Cari"> </form> </body> </html> |
Lalu save dengan index.html dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini
Langkah berikutnya kita berikan style css nya di bawah ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style type="text/css"> .text-input-wrapper { border:1px solid; background-color:white; padding:1px 6px 1px 1px; display:inline-block; } .text-input-wrapper input { border:none; background:none; outline:none; padding:0 0; margin:0 0; font:inherit; } .text-input-wrapper span { cursor:pointer; color:blue; font-weight:bold; visibility:hidden; } </style> |
Jika sudah save dan refresh pada browser nya
Kemudian tinggal kita berikan Javacript nya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> (function() { var searchForm = document.getElementById('search-form'), textInput = searchForm.cari, clearBtn = textInput.nextSibling; textInput.onkeyup = function() { // Show the clear button if text input value is not empty clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden"; }; // Hide the clear button on click, and reset the input value clearBtn.onclick = function() { this.style.visibility = "hidden"; textInput.value = ""; }; })(); </script> |
Save dan refresh pada browsernya, kemudian inputkan text ke dalam form
Nah form berhasil di buat, cukup mudah bukan.
Oke sekian dulu pada artikel kali ini tentang Cara Membuat Form Search Menarik Dengan Javascript kita jumpa lagi di tutorial berikutnya. Semoga bermanfaat dan Sampai Jumpa.
Terimakasih 🙂