Implementasi Form Input Pada Framework Materialize

Selamat datang kembali di situs tips dan trik Source Code Aplikasi, hingga di ketika ini kita telah belajar membahas form input di materialize. Dan sebelumnya kita telah hingga membahas tag input form textarea, checkbox, select dan radio. Dan di kesempatan kali ini kita akan belajar mengenai Implementasi Form Input Pada Framework Materialize, dimana kita akan membangun sebuah tag input diantaranya ada Switches, file upload dan pun date picker. Bagus seketika 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 di file index.html nya dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini

Apabila di klik mana button akan on

Lanjut di artikel kali ini mengenai Implementasi Form Input Pada Framework Materialize kita tambahkan script lagi bagi 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 di browsernya, karenanya hasilnya seperti gambar di bawah ini

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

Berikutnya kita tambahkan kegunaan 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

Apabila telah save dan refresh di browsernya, karenanya hasil nya seperti di bawah ini

Ketika di klik date picker akan muncul

Lumayan menarik bukan..??

Bagus, sekianlah dulu di artikel kali ini mengenai Implementasi Form Input Pada Framework Materialize kita akan berjumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa, Semoga bermanfaat.

Sumber https://kursuswebsite.org