Cara Menggunakan Plugins Input Telepon International

Dunia internet sangatlah luas dan tak terbatas termasuk dunia situs tak akan pernah ada habis nya seandainya kita mau upgrade skill bagi merancang sesuatu yang baru dan merancang situs kita lebih bagus dan inovasi baru. Banyak design situs sekarang ini ini selalu mencari apa yang baru bagi tampilan yang gimik, di dorong dari hal baru lah segala orang banyak mencari – cari agar situs tak mirip dengan yang lainnya dan performa situs lebih cepat dan tak ada load sama sekali. Jquery ataupun Javascript adalah bahasa yang tak dapat di pisahkan dengan HTML/CSS karena Jquery/Javascript adalah pendukung performa situs menggunakan plugins ataun native. Di artikel kali ini saya akan memberikan tips dan trik mengenai Cara Menggunakan Plugins Input Telepon International dimana kita akan menggunakan plugins Jquery yang memang telah di sediakan. Tinggal kita copy saja script bagi kita tempat di pada situs kita, tentu nya hasil yang di dapatkan sangatlah bagus. Selain bagus situs yang kita berikan beberapa plugins pastinya mempunyai kelas tersendiri. Kali ini saya akan mencoba merancang input nomor telepon internasional, dimana ketika kita pilih suatu negara karenanya form akan memberitahukan user kode telepon sesuai negaranya. Di bawah ini ialah screnn shoot nya yang nanti kita akan bikin



Dunia



Nah seperti yang teman – teman lihat di gambar di atas ini, ketika di klik di diantara bendera negara karenanya di pada input akan memberitahukan kode negaranya ini segala memakai plugins Jquery nya, kita akan menggunakannya bagi menghasilkan seperti gambar di atas ini. Bagus, sekarnag kita implementasikan Cara Menggunakan Plugins Input Telepon International pertama-tama – tama kalian unduh terlebih dahulu plugins nya atau dapat klik link ini, kemudian extract di folder nya. Berikutnya buka text editornya dan copy script html nya di bawah ini



<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel=stylesheet href=build/css/intlTelInput.css>
<link rel=stylesheet href=build/css/demo.css>
</head>
<body>
<h1> Telepon Input International</h1>
<form>
<input id=phone type=tel>
<button type=submit>Submit</button>
</form>
</body>
</html>


Dan pastekan di text editor nya lalu save dengan nama index.html, berikutnya kita tinggal panggil plugins yang teman – teman telah unduh dengan cara seperti gambar di bawah ini



Dunia



Kemudian kita ketikkan script Jquery nya bagi menghubungkan dengan plugins



<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
  <script src=js/intlTelInput.js></script>
  <script>
    $(#phone).intlTelInput({
      utilsScript: js/utils.js
    });
  </script>



Pastekan script di atas ini tepat di bawah tag tutup </form>



Dunia



Apabila telah, save dan jalankan file di browswernya, karenanya tampilan telah berhasil di bikin seperti contoh di atas.



Betul-betul gampang bukan menggunakan plugins..??



Bagus, sekianlah di artikel kali ini mengenai Cara Menggunakan Plugins Input Telepon International kita jumpa kembali di artikel berikutnya. Terima Kasih dan Hingga Jumpa.



Semoga bermanfaat.



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS