Blog Request tutorial? klik disini!

  • Membuat Form Menggunakan Bootstrap

    Ditulis oleh: Faizal Rafik
    5839 kali dibaca
    15 Aug / 2014 23:30

    Hallo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat form menggunakan Bootstrap 3. Didalam Bootstrap 3, terdapat 3 tampilan form yaitu :

    1. Vertical Form ( Default )

    2. Inline Form

    3. Horizontal Form

    Yang pertama kita akan membahas tampilan Vertical Form.

    Vertikal Form ( Default )

    Atribut yang perlu ditambahkan sebagai berikut :

    Tambahkan role=”form” didalam tag <form>.

    -  Tambahkan div dengan class form-group yang membungkus setiap label dan control seperti input, radio, select, checkbox, dan lain-lainnya.

    -  Tambahkan class form-control pada setiap inputan seperti input, textarea, select, dan lain-lainnya.

    Berikut adalah Script HTML nya :

    Jika dijalankan dibrowser maka hasilnya seperti gambar dibawah ini :

    Inline Form

    Untuk tampilan inline form kalian bisa menambahkan class form-inline didalam tag <form>, contonya seperti gambar dibawah ini :

    Jika kita jalankan dibrowser maka hasilnya seperti gambar dibawah ini :

    Horizontal Form

    Dan yang terakhir adalah tampilan Horizontal Form, tampilan horizontal form hampir sama dengan tampilan vertical form. Atribut yang perlu ditambahkan adalah :

    -  Class form-horizontal didalam tag <form>.

    -  Tambahkan class control-label pada setiap tag <table>.

    Berikut adalah script HTML nya :

    Jika kita jalankan dibrowser maka hasilnya seperti gambar dibawah ini :

    Demo | Download Source






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155