Membuat Controlgroup dengan jQuery

Membuat Controlgroup dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh Membuat Controlgroup dengan menggunakan jQuery dan jQuery UI

See the Pen Membuat Controlgroup dengan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<form>
  <fieldset>
    <legend>Pilih Bahasa Pemrograman Favorit:</legend>
    <div id="controlgroup">
      <label for="java">Java</label>
      <input type="checkbox" id="java" name="language" value="java">
      <label for="python">Python</label>
      <input type="checkbox" id="python" name="language" value="python">
      <label for="javascript">JavaScript</label>
      <input type="checkbox" id="javascript" name="language" value="javascript">
    </div>
  </fieldset>
</form>

<script>
  $(function() {
    $("#controlgroup").controlgroup();
  });
</script>

</body>
</html>
HTML

Dalam contoh di atas, kita menggunakan jQuery dan jQuery UI untuk membuat Controlgroup pada form HTML. Controlgroup adalah sebuah fitur dari jQuery UI yang memungkinkan kita mengelompokkan elemen-elemen form menjadi satu kesatuan yang terlihat lebih teratur dan terorganisir.

Pada contoh di atas, kita menggunakan tag <fieldset> untuk mengelompokkan elemen-elemen form. Di dalam <fieldset>, kita menggunakan tag <div> dengan id “controlgroup” sebagai wadah untuk elemen-elemen yang akan dijadikan Controlgroup.

Setiap elemen Controlgroup terdiri dari label dan input. Label digunakan untuk memberikan keterangan atau nama pada elemen, sedangkan input digunakan untuk menerima input dari pengguna.

Kemudian, pada bagian JavaScript, kita menggunakan fungsi $(function() {...}) untuk menjalankan kode jQuery setelah halaman selesai dimuat. Di dalam fungsi tersebut, kita menggunakan metode controlgroup() untuk mengubah elemen dengan id “controlgroup” menjadi Controlgroup.

Tutorial lainnya:

Dengan menggunakan jQuery dan jQuery UI, kita dapat dengan mudah membuat Controlgroup yang terlihat rapi dan terorganisir dalam form HTML.

Artikel Terbaru ⭐