Macam-macam Form Input pada HTML dan Bootstrap 4 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Macam-macam Form Input pada HTML dan Bootstrap 4, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel bootstrap,
Artikel HTML5, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
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
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
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
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
1
2
3
<div class="form-group">
<input type="date"class="form-control">
</div>
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
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
Jika sobat menggunakan type ini maka pada textbox secara otomatis berformat time tanpa sobat melaukan masking dengan javascript atau sebagainya. Kodenya adalah sebagai berikut
1
2
3
<div class="form-group">
<input type="time"class="form-control">
</div>
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
1
2
3
<div class="form-group">
<input type="url"placeholder="Input type Url"class="form-control">
</div>
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 :
1
2
3
4
<div class="form-group">
<label for="textarea">Color:</label>
<input type="color">
</div>
Hasil :
9. Input Range
Input type ini secara otomatis menjadi berformat range. Kodenya adalah sebagai berikut
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 :
Demikianlah Artikel Macam-macam Form Input pada HTML dan Bootstrap 4
Sekianlah artikel Macam-macam Form Input pada HTML dan Bootstrap 4 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Macam-macam Form Input pada HTML dan Bootstrap 4 dengan alamat link https://dev-create.blogspot.com/2021/03/macam-macam-form-input-pada-html-dan_24.html
