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
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
Kemudian pada tag <body> paling bawah tambahkan baris javascript berikut
|
1 2 3 |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="form-group"> <input type="text" name="normal_input" id="normal_input" class="form-control" placeholder="Normal Input Text"> </div> <div class="form-group"> <input type="text" name="readonly_input" id="readonly_input" class="form-control" placeholder="Readonly Input Text" readonly> </div> <div class="form-group"> <input type="text" class="form-control" name="disabled_input" id="disabled_input" placeholder="Disabled Input Text" disabled> </div> <div class="form-group"> <input type="text" name="plaintext_input" readonly class="form-control-plaintext" id="plaintext_input" value="Input Plain Text"> </div> |
Hasil :
Form Sizing
Dengan form sizing kita bisa membuat textfield dengan ukuran yang berbeda, contohnya small atau large, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 |
<div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Default form control" name="text2"> </div> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3"> </div> |
Hasil :
Input Group
Contoh diatas adalah merupakan format Input biasa, ada juga yang namanya input group, kodenya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username" id="usr" name="username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> |
Hasil :
Dropdown Button
Ada lagi yang leih kompleks yaitu dropdown button, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> |
Hasil :
2. Input Password
Untuk Input type password nanti akan menghasilkan isian berupa simbol sehingga tidak bisa dilihat oleh user, contoh penggunaannya :
|
1 2 3 |
<div class="form-group"> <input type="password" placeholder="Password" class="form-control" id="password"> </div> |
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
|
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
|
1 2 3 |
<div class="form-group"> <input type="number" max="10000" step="0.0000000001" min="0.0000000001" value="0.0000000001" class="form-control"> </div> |
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
|
1 2 3 |
<div class="form-group"> <input type="email" placeholder="Email" class="form-control"> </div> |
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
|
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
|
1 2 3 4 |
<div class="form-group"> <label>Range</label> <input type="range" class="form-control-range" name="range"> </div> |
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 :
|
1 2 3 4 |
<div class="form-group"> <label for="textarea">Textarea:</label> <textarea class="form-control" rows="3" id="textarea"></textarea> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check mb-3"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" checked>Option 1 </label> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check disabled mb-3"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" disabled>Option 3 (disabled) </label> </div> |
Hasil :
Untuk type ini bootstrap juga menyediakan versi customnya berikut ini kodenya
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="custom-control custom-radio custom-contro mb-3"> <input type="radio" class="custom-control-input" id="customRadio1" name="example1" checked> <label class="custom-control-label" for="customRadio1">Option 1</label> </div> <div class="custom-control custom-radio custom-control mb-3"> <input type="radio" class="custom-control-input" id="customRadio2" name="example1"> <label class="custom-control-label" for="customRadio2">Option 2</label> </div> <div class="custom-control custom-radio custom-control mb-3"> <input type="radio" class="custom-control-input" id="customRadio3" name="example1" disabled> <label class="custom-control-label" for="customRadio3">Option 3 (disabled)</label> </div> |
Hasil :
11. Input Checkbox
Input type ini hampir sama seperti radio button bedanya checkbox bisa dipilih lebih dari satu. beikut adalah contoh kodenya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check mb-3"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" checked>Option 1 </label> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check disabled mb-3"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Option 3 (disabled) </label> </div> |
Hasil :
Untuk type ini juga bisa di custom, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck1" name="example1" checked> <label class="custom-control-label" for="customCheck">Option 1</label> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck2" name="example2"> <label class="custom-control-label" for="customCheck2">Option 2</label> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck3" name="example3" disabled> <label class="custom-control-label" for="customCheck3">Option 3 (disabled)</label> </div> |
Hasil :
12. Input File
Input file digunakan apabila sobat ingin mengupluad gambar atau file. Caranya adalah sebagai berikut :
|
1 2 3 |
<div class="form-group"> <input type="file" class="form-control-file border" name="file"> </div> |
Hasil :
Sobat juga bisa custom input file ini, kodenya adalah sebagai berikut
|
1 2 3 4 |
<div class="custom-file mb-3"> <input type="file" class="custom-file-input" id="customFile" name="filename"> <label class="custom-file-label" for="customFile">Choose file</label> </div> |
Hasil :
13. Select
Type ini biasa juga disebut dengan combobox. Ada 2 jenis yaitu single select dan multiple select. Untuk penulisannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<select name="default_select" id="default_select" class="form-control mb-3"> <option value="1">1</option> </select> <div class="form-group mb-3"> <label>Multiple Select</label> <select multiple class="form-control" id="sel2" name="sellist2"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> |
Hasil :
Selain itu select juga bisa diset custom besarnya, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 |
<select name="small_select" id="small_select" class="form-control form-control-sm mb-3"> <option value="small_select">Small select</option> </select> <select name="default_select" id="default_select" class="form-control mb-3"> <option value="default_select">Default select</option> </select> <select name="large_select" id="large_select" class="form-control form-control-lg mb-3"> <option value="large_select">Large select</option> </select> |
Hasil
Atau bisa juga di custom menggunakan bootstrap tentunya, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 |
<select name="small" id="small" class="custom-select custom-select-sm mb-3"> <option value="Small Custom Select Menu" selected>Small Custom Select Menu</option> </select> <select name="deault" id="deault" class="custom-select mb-3"> <option value="Default Custom Select Men" selected>Default Custom Select Menu</option> </select> <select name="large" id="large" class="custom-select custom-select-lg mb-3"> <option value="Large Custom Select Menu" selected>Large Custom Select Menu</option> </select> |
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 :