Macam-macam Form Input pada HTML dan Bootstrap 4

Macam-macam Form Input pada HTML dan Bootstrap 4 – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang macam-macam form input yang ada pada Bootstrap. Pada contoh kali ini saya menggunakan Bootstrap 4 karena saat artikel ini diposting bootstrap 4 adalah versi yang paling baru. Namun sebenarnya untuk bootstrap 3 juga tidak jauh berbeda.

Seperti yang sobat tahu, bootstrap sangat-sangat wajib dipakai untuk sobat developer web terutama PHP. Sebenarnya boleh-boleh saja jika sobat tidak menggunakan bootstrap akan tetapi itu nantinya akan menjadikan proses pengerjaan aplikasi sobat menjadi lebih lama. Hal ini tentunya tidak disukai oleh klien kita karena pasti kita sebagai programmer dituntut untuk cepat dalam mengerjakan aplikasi. Oleh karena itu kebanyakan developer menggunakan bootstrap, bahkan untuk sekelas perusahaan besar sekalipun.

Begitu pun juga apabila sobat mendownload template gratis. Hampir semuanya menggunakan bootstrap. Maka dari itu sobat harus mengerti terlebih dahulu fitur-fitur apa saja yang ada pada bootstrap ini. Pada kesempatan kali ini saya hanya akan membahas tentang form input saja. Masih banyak lagi nanti yang bisa saya bahas seperti alert, tooltip, Element, Pop over, list group, dan masih banyak lagi.

Karena pada contoh kali ini saya menggunakan bootstrap maka, ada beberapa librari yang harus sobat masukkan. Pada tag <head>…</head> tambahkan baris css berikut

Kemudian pada tag <body> paling bawah tambahkan baris javascript berikut

Karena keperluan demo maka saya contohkan online, jika untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu. Atau nanti di akhir saya berikan link untuk mendownload project pada postingan ini beserta file css dan jsnya. Berikut adalah macam-macam inputan yang biasa digunakan dalam membuat form pada HTML :

1. Input Text

Pada input text ini ada 4 macam yang biasa digunakan yaitu normal, readonly, disabled dan plain text. Untuk kodenya adalah sebagai berikut

Hasil :

Form Sizing

Dengan form sizing kita bisa membuat textfield dengan ukuran yang berbeda, contohnya small atau large, kodenya adalah sebagai berikut

Hasil :

Input Group

Contoh diatas adalah merupakan format Input biasa, ada juga yang namanya input group, kodenya adalah sebagai berikut :

Hasilnya :

Input Group Button

Jika Input group maka bagian sebelahnya hanya berupa tulisan atau teks. Namun jika input group button bagian sampingnya adalah sebuah tombol. Contoh penggunaannya adalah sebagai berikut

Hasil :

Dropdown Button

Ada lagi yang leih kompleks yaitu dropdown button, kodenya adalah sebagai berikut

Hasil :

2. Input Password

Untuk Input type password nanti akan menghasilkan isian berupa simbol sehingga tidak bisa dilihat oleh user, contoh penggunaannya :

Hasil :

3. Input Date

Untuk Input date secara otomatis akan menghasilkan pilihan tanggal yang berformat hari/bulan/tahun dan jika diklik nanti akan menghasilkan tampilan calendar. Kodenya adalah sebagai berikut

Hasil :

4. Input Number

Untuk input type number nanti isiannya hanya berupa angka dan di sebelah kanan nanti akan muncul tombol atas dan bawah untuk menambah dan mengurangi angka. dan juga bisa di set minimal dan maximal serta bisa diset juga step yang ditambahkan atau dikurangkan saat klik tombol sebelah kanan. Kodenya adalah sebagai berikut

Hasil :

5. Input Email

Dengan input type email maka secara otomatis saat diklik form submit dan data yang diinputkan bukan email yang valid maka tidak akan bisa disimpan. Jadi kita tidak perlu repot-repot membuat validasinya secara manual. Kodenya adalah sebagai berikut

Hasil :

6. Input Time

Jika sobat menggunakan type ini maka pada textbox secara otomatis berformat time tanpa sobat melaukan masking dengan javascript atau sebagainya. Kodenya adalah sebagai berikut

Hasil :

7. Input Url

Type ini hampir sama seperti type email hanya saja ini formatnya url, jika user tidak menginputkan url yang benar maka tidak akan bisa disimpan. Kodenya adalah sebagai berikut

Hasil :

 

8. Input Color

Input type color ini jika di klik maka akan muncul pop up untuk memilih warnanya, output yang dihasilkan nanti biasa nya berjenis Hex Code contoh #fffff. Kodenya adalah sebagai berikut :

Hasil :

 

9. Input Range

Input type ini secara otomatis menjadi berformat range. Kodenya adalah sebagai berikut

Hasil :

10. Textarea

Ini sebenarnya bukan type input tapi textarea dan beda sendiri tapi sebenarnya hampir mirip dengan input type text bedanya bisa multiple colom jadi lebih besar dan bisa di enter. Kodenya adalah sebagai berikut :

Hasil :

11. Radio Button

Input type ini berupa pilihan biasanya lebih dari satu tentunya dengan id yang sama namun value yang berbeda. Kodenya adalah sebagai berikut

Hasil :

Untuk type ini bootstrap juga menyediakan versi customnya berikut ini kodenya

Hasil :

 

11. Input Checkbox

Input type ini hampir sama seperti radio button bedanya checkbox bisa dipilih lebih dari satu. beikut adalah contoh kodenya

Hasil :

Untuk type ini juga bisa di custom, kodenya adalah sebagai berikut

Hasil :

12. Input File

Input file digunakan apabila sobat ingin mengupluad gambar atau file. Caranya adalah sebagai berikut :

Hasil :

Sobat juga bisa custom input file ini, kodenya adalah sebagai berikut

Hasil :

13. Select

Type ini biasa juga disebut dengan combobox. Ada 2 jenis yaitu single select dan multiple select. Untuk penulisannya adalah sebagai berikut

Hasil :

Selain itu select juga bisa diset custom besarnya, kodenya adalah sebagai berikut

Hasil

Atau bisa juga di custom menggunakan bootstrap tentunya, kodenya adalah sebagai berikut

Hasil :

Bagaimana banyak bukan? apakah ada yang baru tahu? Ini baru form standarnya saja masih banyak jenisnya jika sobat custom sendiri. Seperti masking, validasi, multiple select, select dengan seach dan masih banyak lagi namun itu akan saya bahas satu persatu pada postingan lainnya karena jika pada postingan ini pasti akan sangat panjang dan akan sangat lama. Sekian postingan saya tentang Macam-macam Form Input pada HTML dan Bootstrap. Jika ada salah saya mohon maaf dan apabila ada yang ingin ditanyakan tinggalkan komentar pada koolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

8 thoughts on “Macam-macam Form Input pada HTML dan Bootstrap 4

  1. Pingback: - Dewan Komputer

Leave a Reply

Your email address will not be published. Required fields are marked *

fourteen + two =