01 Desain Web Responsif
A - Aplikasi Kucingku
Tag fieldset

Tag fieldset

Kalau kamu perhatikan, tag <h1>, <h2>, <p> dan banyak tag lainnya memposisikan elemen mereka bertumpuk dari atas ke bawah. Sedangkan tag seperti <input> dan <button> berjejeran ke samping. Hal ini karena kedua kelompok tersebut memiliki level yang berbeda

Kelompok pertama yang bertumpuk atas bawah berjenis Block-Level Elements (opens in a new tab), yang berarti element tersebut menggunakan seluruh ruang yang ada di baris tersebut untuk dirinya sendiri.

Sedangkan, tag yang berjejer ke samping berjenis Inline-Level Elements (opens in a new tab), artinya tag tersebut hanya menempati ruang sesuai dengan ukuran mereka saja.


Baiklah, mari kita kembali ke topik utama. Di dalam suatu <form> kita dapat mengelompokkan input dan label di dalam satu kelompok yang sama menggunakan tag <fieldset>.

Contoh

<fieldset>
  <input type="radio" id="opsi-item-1" value="item1" /><label>Item #1</label>
 
  <input type="text" id="input-teks" name="input1" />
</fieldset>

Tantangan

Masukkan semua input bertipe radio ke dalam tag <fieldset>.


Solusi

Buka Solusi (opens in a new tab)