Tutorial Ionic Part 7 : Pengenalan Form Pada Ionic
Pengenalan Form Pada Ionic
Pengenalan Form Pada Ionic – berjumpa kembali di artikel pemogram mobile hybrid (ionic framework). pada kesempatan ini saya akan membahas mengenai Pengenalan Form Pada Ionic. untuk membuat form menggunakan ionic ini sama halnya dengan kita membuat form pada HTML (HTML5). fungsi form sendiri adalah interaksi antara aplikasi dan user. dalam artikel ini kita akan berkenalan dengan beberapa form input menggunakan ionic.
Pengenalan Form Pada Ionic
perhatikan form dibawah ini :
Pengenalan Form Pada Ionic
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<ion-content class="padding has-header"> <div class="item" align="center">IDENTITAS</div> <div class="list"> <label class="item item-input"> <input type="text" placeholder="Nama Nama"> </label> <label class="item item-input"> <input type="text" placeholder="NIM"> </label> <label class="item item-input"> <input type="text" placeholder="Alamat"> </label> <label class="item item-input"> <input type="text" placeholder="Tempat Lahir"> </label> <label class="item item-input"> <input type="Date" placeholder="tagl/lahir"> </label> </div> <ion-content> |
See the Pen Pengenalan Form Pada Ionic by muzanni (@pemalas) on CodePen.0
penjelasan :
untuk membuat form identitas disini saya meletakkannya dalam class list, ini supaya peletakan kodenya biar lebih rapi. sedangkan untuk inputannya sendiri saya membungkusnya kedalam tag label dengan class item supaya tampilan yang dihasilkan lebih manrik. cobak dites aja penerapannya tanpa membungkus dalam tag label tersebut.
Penggunaan element Inline Label
selain membuat label seperti contoh di atas, dapat juga dengan menggunakan inline label. contohnya seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ion-content class="padding has-header"> <div class="item" align="center">Inline Label</div> <ion-list> <label class="item item-input"> <span class="input-label">Nama</span> <input type="text"></input> </label> <label class="item item-input"> <span class="input-label">password</span> <input type="password"></input> </label> </ion-list> <ion-content> |
Pengenalan Form dengan Inline Label
Penggunaan element Inset Input
pada penggunaan inset input ini akan menempatkan tombol kedalam item input, salah satu contoh penggunaan element inset input ini adalah form submit email :
Pengenalan Form menggunakan elemen inset input
berikut kode untuk tampilan form submit di atas :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-content class="padding has-header"> <ion-list> <ion-item class="item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="masukkan email"> </label> <button class="button button-small button-positive"> Kirim </button> </ion-item> </ion-list> <ion-content> |
membuat form pencarian menggunakan ionic
berikut contoh form pencarian menggunakan ionic :
Form pencarian menggunakan ionic
berikut kode programnya :
|
1 2 3 4 5 6 7 8 |
<ion-content class="padding has-header"> <ion-list class="list-inset"> <label class="item item-input"> <i class="icon ion-search"></i> <input type="text" placeholder="cari"></input> </label> </ion-list> <ion-content> |
oke, saya rasa sekian dulu Pengenalan Form Pada Ionic. saya sarankan untuk memodifikasi sebagus mungkin agar tampilan aplikasi lebih menarik.
Tutorial Menarik Lainnya
Tutorial Ionic Part 11 : Icon Pada Ionic
Tutorial Ionic Part 10 : Checkbox pada Ionic
Tutorial Ionic Part 9 : Penggunaan Warna Pada Ionic
Tutorial Ionic Part 8 : Pengenalan Komponen Tabs Pada Ionic
