Hai semuanya!

Ini adalah website lama kami, pada akhir agustus 2020 website ini akan di ahlikan ke https://sekolahprogram. Website yang baru Anda bisa diskusi, membuat artikel dan membagikan karya aplikasi mu.


New Sekolah Program

Bootstrap 4 – Form

Febri Hidayan Komentar

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


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *