Bootstrap - Form Controls: A Comprehensive Guide for Beginners

Hai daar, bakal pengembang web! Saya sangat gembira untuk memulai perjalanan ini bersama Anda saat kita telusuri dunia yang menakjubkan dari kontrol form Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat menjamin Anda bahwa menguasai konsep-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 ceritakan kisah singkat. Pernah saya punya murid yang kesulitan membuat form. Dia menghabiskan jam untuk mencoba menyusun 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 - ia membuat hal yang kompleks menjadi sederhana.

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

Sizing

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

<input class="form-control form-control-lg" type="text" placeholder="Input besar">
<input class="form-control" type="text" placeholder="Input default">
<input class="form-control form-control-sm" type="text" placeholder="Input kecil">

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 menambahkan teks bantuan di bawah input password. Kelas form-text menylematkan teks ini sesuai, membuatnya tampak sebagai informasi tambahan.

Disabled

Mungkin ada situasi di mana Anda ingin menonaktifkan beberapa kontrol form. Bootstrap membuat ini mudah:

<input class="form-control" type="text" placeholder="Input nonaktif" aria-label="Contoh input nonaktif" disabled>
<textarea class="form-control" placeholder="Textarea nonaktif" aria-label="Contoh textarea nonaktif" disabled></textarea>

Dengan menambahkan atribut disabled, kita membuat kontrol form ini tak dapat diedit. Mereka akan tampak 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="Contoh input readonly" readonly>

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

Readonly Plain Text

Kadang-kadang, Anda ingin menampilkan informasi sebagai bagian dari form tanpa membuatnya 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 gaya field form default, membuatnya tampak seperti teks biasa.

File Input

Input file memungkinkan pengguna mengunggah file. Berikut cara 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 disesuaikan dengan gaya kontrol form Bootstrap lainnya.

File Input Using Sizes

Seperti kontrol form lainnya, input file juga 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 disesuaikan dengan gaya kontrol form Bootstrap lainnya.

Datalists

Datalists 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 bahas:

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 pemilih warna input menggunakan type="color"
Datalists	Sediakan saran otomatis untuk input menggunakan elemen <datalist>

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

Selamat coding, bakal pengembang web!

Credits: Image by storyset