Assalamualaikum warahmatullahi wabarakatuh.
Hallo teman teman developer yang ada di sabang sampai merauke, Pada tutorial kali ini saya sharing tentang bagaimana membuat form dengan menggunakan bootstrap 3.
Apa sih form ? masak tidak tau sih apa itu form, heee,,,,, Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).
Baik di dalam bootstrap terdapat banyak bentuk tampilan pembuatan form :
Namun untuk kali ini saya akan memberikan tiga contoh dalam pembuatan form :
1. Vertical form (default)
2. Inline form
3. Horizontal form
Yang pertama saya bahas tentang vertical form, ini adalah tata letak formulir Bootstrap default dimana bidang disejajarkan secara vertikal dengan induknya. Mari kita buat form sederhana menggunakan tata letak formulir vertikal.
Berikut adalah script HTML nya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Kemudian Yang kedua dengan inline form, Tata letak inline bootstrap dapat digunakan untuk menempatkan kontrol formulir berdampingan dalam tata letak ringkas. Dalam bentuk inline, semua elemen in-line, rata kiri, dan label ada di sampingnya. Untuk ini, perlu menambahkan kelas .form-inline ke elemen <form>.
Berikut script HTMLnya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Masih semangat ya kita lanjut untuk tutorial yang ketiga dengan menggunakan horizontal form,
Bentuk horizontal, berbeda dari tata letak formulir vertikal baik dalam jumlah mark-up, dan dalam presentasi formulir. dalam bentuk ini label tata letak melayang ke kiri dari bidang input. Bidang label dan input keduanya muncul pada baris yang sama. Aturan untuk formulir horizontal selain aturan default, yang harus anda lakukan adalah menambahkan kelas .form-horizontal ke tag <form> dan kelas control-label ke semula elemen <label>. Gunakan kelas kisi standar bootstrap untuk menyelaraskan label dan membentuk kontrol.
Berikut script HTMLnya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Selesai sudah tutorial nya okey untuk tutprial selanjut nya tinggal pesen aja mau di buatin tutorial apa okeyyy, ,, terimakasih banyak kepada yang telah membaca tutorial ini semoga bermanfaat.
SALAM PROGRAMMING !!!!!!
Email = hi.wasissubekti02@gmail.com
Linkedin = sigit wasis subekti
Portfolio = sigit-wasis.github.iokjMLdimna
Hallo teman teman developer yang ada di sabang sampai merauke, Pada tutorial kali ini saya sharing tentang bagaimana membuat form dengan menggunakan bootstrap 3.
Apa sih form ? masak tidak tau sih apa itu form, heee,,,,, Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).
Baik di dalam bootstrap terdapat banyak bentuk tampilan pembuatan form :
Namun untuk kali ini saya akan memberikan tiga contoh dalam pembuatan form :
1. Vertical form (default)
2. Inline form
3. Horizontal form
Yang pertama saya bahas tentang vertical form, ini adalah tata letak formulir Bootstrap default dimana bidang disejajarkan secara vertikal dengan induknya. Mari kita buat form sederhana menggunakan tata letak formulir vertikal.
Berikut adalah script HTML nya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Berikut script HTMLnya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Bentuk horizontal, berbeda dari tata letak formulir vertikal baik dalam jumlah mark-up, dan dalam presentasi formulir. dalam bentuk ini label tata letak melayang ke kiri dari bidang input. Bidang label dan input keduanya muncul pada baris yang sama. Aturan untuk formulir horizontal selain aturan default, yang harus anda lakukan adalah menambahkan kelas .form-horizontal ke tag <form> dan kelas control-label ke semula elemen <label>. Gunakan kelas kisi standar bootstrap untuk menyelaraskan label dan membentuk kontrol.
Berikut script HTMLnya :
Kemudian jika kita run atau kita buka pada browser dengan tulis localhost/latihan.php (sesuaikan dengan nama file anda).
Selesai sudah tutorial nya okey untuk tutprial selanjut nya tinggal pesen aja mau di buatin tutorial apa okeyyy, ,, terimakasih banyak kepada yang telah membaca tutorial ini semoga bermanfaat.
SALAM PROGRAMMING !!!!!!
Email = hi.wasissubekti02@gmail.com
Linkedin = sigit wasis subekti
Portfolio = sigit-wasis.github.iokjMLdimna
Tags:
Bootstrap