Cara Penggunaan Tag Fieldset pada Form HTML

Hallo teman-teman, Bertemu kembali dengan saya diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Penggunaan Tag Fieldset pada Form HTML. Jadi fungsi dari tag Fieldset diHTML adalah untuk mengelompokan sebuah object atau form dan juga untuk mempercantik sebuah form. Untuk lebih jelasnya langsung saja kita mulai prakteknya tentang Cara Penggunaan Tag Fieldset pada Form HTML.

Pertama-tama silahkan teman-teman buka text editor yang teman-teman gunakan, lalu ketikan script HTML dibawah ini :

<form>
 <fieldset>
  <legend>Form Login</legend>
  <table>
    <tr>
        <td>Email:</td><td><input type="text" placeholder="Email Address"></td>
    </tr>
    <tr>
       <td>Password:</td><td><input type="password" placeholder="Password"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Masuk"></td>
    </tr>
  </table>
 </fieldset>
</form>

Jika sudah dengan HTMLnya silahkan teman-teman simpan dengan nama Fieldset.html, dan coba perhatikan pada syntax htmlnya disana terdapat tag fieldset. Jadi disini kita mengelompokan bahwa form yang sekarang kita buat ini adalah form untuk login.

Oke lanjut ketahap selanjutnya, silahkan teman-teman masukan script CSS dibawah ini dan letakan diantara tag head pada html atau tinggal menambahkan tag style, atau lebih jelasnya disini kita menggunakan CSS internal.

 fieldset {
      width: 200px;
  }

Jika sudah dengan HTML dan CSSnya silahkan teman-teman simpan, dan kemudian silahkan teman-teman coba jalankan/run di browser yang teman-teman gunakan, jika berhasil maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Jika hasil teman-teman sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam membuat Fieldset pada form HTML atau tentang Cara Penggunaan Tag Fieldset pada Form HTML. Cukup mudahkan teman-teman ? dan terlihat lebih rapih juga jika menggunakan fieldset.

Oke untuk pembahasan kali ini tentang Cara Penggunaan Tag Fieldset pada Form HTML cukup sampai disini dulu. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Baca juga artikel lanjutan dari fieldset ini di :

https://www.kursuswebsite.org/cara-membuat-kotak-komentar-sederhana-dengan-html-dan-css/

Terimakasih

Cara Penggunaan Tag Fieldset pada Form HTML

Kategori