Bootstrap - Form Controls: A Comprehensive Guide for Beginners

Hai teman-teman pengembang web masa depan! Saya sangat senang untuk memulai perjalanan ini bersama Anda saat kita telusuri dunia yang menakjubkan dari kontrol form Bootstrap. Sebagai orang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa menjamin Anda bahwa menguasai konsep ini akan menjadi perubahan besar dalam karier pengembangan web Anda. Jadi, mari kita masuk ke dalamnya!

Introduction to Bootstrap Form Controls

Sebelum kita mulai, mari saya share cerita singkat. Pernah sekali saya memiliki murid yang kesulitan membuat form. Dia menghabiskan jam untuk mencoba mengatur input dan membuatnya terlihat rapi. Kemudian, dia menemukan kontrol form Bootstrap, dan itu seperti melihat lampu penerangan yang menyala di atas kepalanya! Itu kekuatan Bootstrap - itu menjadikan yang kompleks menjadi sederhana.

Kontrol form Bootstrap adalah elemen yang sudah di-styling yang memungkinkan pengguna untuk memasukkan data di halaman web Anda. Mereka responsif, dapat diubahsuai, dan sangat mudah digunakan. Mari kita telusuri setiap jenisnya secara rinci.

Sizing

Salah satu hal pertama yang Anda ingin belajar adalah bagaimana mengatur ukuran kontrol form Anda. Bootstrap menyediakan tiga ukuran: kecil, default, dan besar.

<input class="form-control form-control-lg" type="text" placeholder="Large input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">

Dalam contoh ini, kita telah membuat tiga field input berukuran berbeda. Kelas form-control adalah kelas dasar untuk semua kontrol form di Bootstrap. Menambahkan form-control-lg membuatnya besar, sedangkan form-control-sm membuatnya kecil.

Form Text

Kadang-kadang, Anda perlu memberikan informasi tambahan tentang field form. Itu di mana form text berguna.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Password Anda harus 8-20 karakter panjang, mengandung huruf dan angka, dan tidak boleh mengandung spasi, karakter khusus, atau emoji.
</div>

Di sini, kita telah menambahkan teks bantuan di bawah input password. Kelas form-text meng-styling teks ini sesuai, membuatnya tampak sebagai informasi tambahan.

Disabled

Ada situasi di mana Anda mungkin ingin menonaktifkan beberapa kontrol form. Bootstrap membuat ini mudah:

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<textarea class="form-control" placeholder="Disabled textarea" aria-label="Disabled textarea example" disabled></textarea>

Dengan menambahkan atribut disabled, kita membuat kontrol form ini tak dapat diedit. Mereka akan tampak berwarna abu-abu, menandakan kepada pengguna bahwa mereka tidak dapat diubah.

Readonly

Input readonly mirip dengan yang dinonaktifkan, tetapi mereka masih dapat difokuskan dan dipilih.

<input class="form-control" type="text" value="Input readonly disini..." aria-label="readonly input example" readonly>

Atribut readonly membuat input tak dapat diedit tetapi masih dapat difokuskan.

Readonly Plain Text

Kadang-kadang, Anda ingin menampilkan informasi sebagai bagian dari form tanpa membuatnya menjadi field yang dapat diedit. Itu di mana teks readonly biasa berguna:

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

Kelas form-control-plaintext menghapus styling default field form, membuatnya tampak seperti teks biasa.

File Input

Input file memungkinkan pengguna untuk mengunggah file. Berikut cara Anda membuatnya:

<div class="mb-3">
<label for="formFile" class="form-label">Contoh input file default</label>
<input class="form-control" type="file" id="formFile">
</div>

Ini membuat field input file yang di-styling konsisten dengan kontrol form Bootstrap lainnya.

File Input Using Sizes

Seperti kontrol form lainnya, input file dapat diatur ukurannya:

<div class="mb-3">
<label for="formFileSm" class="form-label">Contoh input file kecil</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Contoh input file besar</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Kita menggunakan kelas ukuran yang sama seperti sebelumnya: form-control-sm dan form-control-lg.

File Input Using Attribute

Anda juga dapat menyesuaikan input file menggunakan atribut:

<div class="mb-3">
<label for="formFileMultiple" class="form-label">Contoh input file beberapa</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

Atribut multiple memungkinkan pengguna untuk memilih lebih dari satu file.

Color

Bootstrap bahkan mendukung input warna:

<label for="exampleColorInput" class="form-label">Pemilih warna</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Pilih warna Anda">

Ini membuat pemilih warna input yang di-styling konsisten dengan kontrol form Bootstrap lainnya.

Datalists

Datalist menyediakan daftar opsi yang sudah ditentukan untuk field input:

<label for="exampleDataList" class="form-label">Contoh datalist</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Ketik untuk mencari...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

Ini membuat field input dengan saran otomatis dari datalist.

Summary of Bootstrap Form Control Methods

Berikut adalah tabel yang menggabungkan metode yang kita cover:

Metode	Deskripsi
Sizing	Sesuaikan ukuran kontrol form menggunakan kelas seperti form-control-lg dan form-control-sm
Form text	Tambahkan teks tambahan ke kontrol form menggunakan kelas form-text
Disabled	Buat kontrol form tak dapat diedit menggunakan atribut disabled
Readonly	Buat kontrol form tak dapat diedit tetapi dapat difokuskan menggunakan atribut readonly
Readonly plain text	Tampilkan informasi sebagai teks biasa menggunakan kelas form-control-plaintext
File input	Buat input file upload menggunakan type="file"
File input sizing	Sesuaikan ukuran input file menggunakan kelas ukuran
File input attributes	Sesuaikan input file dengan atribut seperti multiple
Color	Buat input pemilih warna menggunakan type="color"
Datalists	Sediakan saran otomatis menggunakan elemen <datalist>

Dan itu saja! Anda baru saja belajar tentang kontrol form Bootstrap. Ingat, latihan membuat sempurna. Cobalah menggabungkan elemen ini ke dalam proyek Anda sendiri, dan segera Anda akan membuat form yang indah dan responsif dengan mudah.

Selamat coding, pengembang web masa depan!

Credits: Image by storyset