Belajar Materialize #22 : Text Input pada Materialize

Text Input pada Materialize – Halo “sahabat kodingin” berjumpa lagi pada seri tutorial belajar materialize menggunakan bahasa Indonesia.

Text Input pada Materialize

Kali akan akan meneruskan seri ke 21 yang berjudul Cara Menggunakan Collapsible pada Materialize, Sekarang kita akan membahas komponen teks input pada materialize.

Sebeleum menggunakan text input pada materialize sebaiknya anda sudah paham tentang text input dasar pemrograman HTML.

Jika belum yuk cari tahu dulu “apa itu text input” ?

Pengertian Text Input

Text Input merupakan sebuah form yang digunakan oleh pengguna untuk menuliskan atau memasukan sesuatu. Yang di maksud menuliskan disini yaitu teks baik numberik maupun teks biasa. Sedangkan memasukan sesuatu yaitu memasukan sebuah file, misalnya gambar.

Macam-Macam Text Input

Secara umum ada 3 text input yaitu input field, text area dan input file. Mari kita bahas satu per satu.

Input Field

Input fields merupakan sebuah input yang berupa teks pendek untuk satu baris saja, biasanya untuk memasukan teks berupa teks biasa, email, password dan angka.

Textarea

Textarea merupakan sebuah kolom yang berukutan lebih besar. Dengan menggunakan text area kita dapat menuliskan lebih dari satu baris text.

Input File

Input File merupakan sebuah kolom yang berfungsi untuk memasukan fiie ke dalam form, misalnya saja file yang berupa gambar

Cara Menggunakan Text Input pada Materialize

Text input di materialize memiliki tampilan yang keren, jika form input pada tag HTML secara default berupa bentuk persegi panjang yang terdapat sebuah border /baris di semua sisi maka dengan menggunakan desain material hanya akan ada sebuah garis di bawahnya.

Untuk membuat text input dapat meggunakan class .input-fiels sebagai pembungkus form input yang digunakan.

Berikut ini contoh kode membuat text input.

Perhatikan kode diatas, terapat 3 bentuk text input yaitu input field, textarea dan input field. Dimana pada input field terdapat 2 varian yang berbeda yaitu menggunakan placeholder dan tidak. Secara umum ketika menggunakan placeholder ada tulisan di dalam text input. Di materialize juga demikian, namun yang membedakan jika tidak ada placeholder maka ketika di klik kolom nya maka terdapat efek ke atas pada tulisan labelnya.

Di dalam input field terdapat 3 jenis tipe input yaitu email,text dan password.

Selain itu juga terdapat text input yang berupa file, pembuatan file input file menggunakan bantuan button, sehiingga terlihat lebih keren dan memudahkan pengguna.

Sekarang kita lihat hasilnya.

Belajar Materialize #22 : Text Input pada Materialize
Cara Menggunakan Text Input pada Materialize

Perhatikan gambar di atas, gambar di atas menunjukan bahwa apa yang kita tulis di kode sesuai dengan hasilnya. Terdapat 6 input dengan varian ada yang berbeda maupun sama.

Terlihat gambar di atas hanya sebauh text input saja, anda dapat menambahkan tombol / button. Jika belum tahu cara membuatan nya baca tutorial : Belajar Materialize #6 : Membuat Tombol Button Materialize.

Kesimpulan…

Untuk membuat text input form dapat di lakukan dengan mudah, dengan menambahkan class yang telah di buat materialize maka tampilan form kita terlihat indah.

Perlu di ketahui terdapat 3 jenis text input yaitu input field, textarea dan input file.

Baca Juga…

Leave a Reply