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

Cara Membuat Form Search Menarik Dengan Javascript

Seperti yang kalian lihat form tampak kosong

Cara Membuat Form Search Menarik Dengan Javascript

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

Lalu save dengan index.html dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini

Cara Membuat Form Search Menarik Dengan Javascript

Langkah berikutnya kita berikan style css nya di bawah ini

Jika sudah save dan refresh pada browser nya

Cara Membuat Form Search Menarik Dengan Javascript

Kemudian tinggal kita berikan Javacript nya

Save dan refresh pada browsernya, kemudian inputkan text ke dalam form

Cara Membuat Form Search Menarik Dengan Javascript

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 🙂

 

WhatsApp chat