Bootstrap 4 – Form
Pada kesempatan kali ini kita akan coba membuat form dengan boostrap 4 dimana kegunaannya cukup banyak sekali. Mulai dari membuat form register, login dan data pengguna. Pada dasarnya kita untuk membuat tampilan yang sederhana mungkin. Dalam pembuatannya kita hanya beberapa saja menggunakan classnya. Silakan lihat hasilnya dan perhatikan hasil kode yang telah dibuat dibawah ini.
Kode Form - Bootstrap 4
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="gender">Gender</label><br>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" id="gender1" value="1" class="custom-control-input" required checked>
<label class="custom-control-label" for="gender1">Fale</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" id="gender2" value="2" class="custom-control-input" required>
<label class="custom-control-label" for="gender2">Famale</label>
</div>
</div>
<div class="form-group">
<label for="select">Select</label>
<select class="form-control" name="select" id="select">
<optgroup label="Opsi Select">
<option value="">Opsi 1</option>
<option value="">Opsi 2</option>
<option value="">Opsi 3</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message" rows="8" cols="80" class="form-control" placeholder="Tulisakan pesan Anda..."></textarea>
</div>
</form>
Pada penggunaan form ada beberapa aturan dimana kita melatakan suatu class di dalam class jadi intinya kita membuat form tadi terdapat class input-group digunakan untuk membuat group tersendiri dalam satu data. Sedikit penjelasan dibawah ini tentang penggunaan class diatas.
- Form-group digunakan sebagai kelompok antara beberapa form input.
- Form-control bisa digunakan dibeberapa tag html yaitu <input>, <select>, <textarea>
- Custom-control digunakan sebagai cara untuk menentukan penyesuaian yang kita inginkan.
- Custom-radio maka input tersebut akan berbentuk radio.
- custom-control-inline maka input radio akan inline atau sejajar.
Category Bootstrap