Implementasi Form Input Pada Framework Materialize

Selamat datang kembali di website tips dan trik Dumet School, sampai pada saat ini kita sudah belajar membahas form input pada materialize. Dan sebelumnya kita sudah sampai membahas tag input form textarea, checkbox, select dan radio. Dan pada kesempatan kali ini kita akan belajar tentang Implementasi Form Input Pada Framework Materialize, dimana kita akan membuat sebuah tag input diantaranya ada Switches, file upload dan juga date picker. Baik langsung saja kita praktekkan, teman – teman siapkan file materialize nya kemudian copy script html nya di bawah ini.

<div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
</div>

Kemudian pastekan pada file index.html nya dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Jika di klik mana button akan on

Lanjut pada artikel kali ini tentang Implementasi Form Input Pada Framework Materialize kita tambahkan script lagi untuk file upload, teman – teman copy script di bawah ini

<div class="file-field input-field">
  <div class="btn">
    <span>File Upload</span>
    <input type="file">
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text">
  </div>
</div>

Save dan refresh pada browsernya, maka hasilnya seperti gambar di bawah ini

Dan kita dapat drak file yang akan kita upload atau kita bisa klik tombol atau form inputnya

Berikutnya kita tambahkan fungsi date picker nya, teman – teman copy script nya di bawah ini

<div class="input-field col s6">
  <input type="text" class="datepicker">
  <label for="icon_prefix">Date</label>
</div>

Dan tambahkan script jQuery nya

<script type="text/javascript">
 $('.datepicker').pickadate({
 selectMonths: true, // Creates a dropdown to control month
 selectYears: 15, // Creates a dropdown of 15 years to control year,
 today: 'Today',
 clear: 'Clear',
 close: 'Ok',
 closeOnSelect: false // Close upon selecting a date,
 });
 </script>

Letakkan script jQuery nya tepat di bawah link materialize.min.js

Jika sudah save dan refresh pada browsernya, maka hasil nya seperti di bawah ini

Ketika di klik date picker akan muncul

Cukup menarik bukan..??

Baik, sekian dulu pada artikel kali ini tentang Implementasi Form Input Pada Framework Materialize kita akan berjumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, Semoga bermanfaat.

Implementasi Form Input Pada Framework Materialize

Kategori