Cara Membuat Legend Berada di Tengah Pada Tag Filedset

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, pada tutorial kali ini saya akan mencoba membagi Cara Membuat Legend Berada di Tengah Pada Tag Filedset.

Fungsi dari tag fieldset adalah mempercantik tampilan form dimana teman-teman pakai untuk membuat form login atau yang lain. Nah, fungsi tag legend sendiri adalah untuk memberi judul pada form yang berada pada tag fieldset. Pada kasus kali ini saya akan membuat legend itu berada di tengah posisinya dimana letak defautl tag legend adalah di posisi kiri.

Sekarang saya akan mencoba membuat posisi tag legend menjadi di tengah, berikut tutorial singkat tentang Cara Membuat Legend Berada di Tengah Pada Tag Filedset:

– Pertama teman-teman ketikan kode HTML di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Legend</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <form>
    <fieldset>
    <legend>Dumenity</legend>
      <label for="name">Username:</label>
      <input type="text" name="name" id="name" />
      <br />
      <label for="mail">E-mail:</label>
      <input type="email" name="mail" id="mail" />
      <br />
      <label for="address">Address:</label>
      <input type="text" name="address" id="address" size="40" />
    </fieldset>
  </form>

</body>
</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan kode CSS3 di bawah ini:

form{width: 500px; margin: auto}

fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  border:5px solid #35d5cf
  }

input[type=text]{margin-bottom: 10px}
input[type=email]{margin-bottom: 10px}

label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }

legend {
  padding: 0.2em 0.5em;
  border:5px solid #35d5cf;
  color:green;
  font-size:90%;
  text-align:right;
  }

Save dengan nama style.css, apabila teman-teman buka di browser maka akan menjadi seperti ini:

– Ketiga teman-teman buka file html teman-teman lalu ketikan “align=center” di dalam tag legend, seperti kode di bawah:

<legend align=center>Dumenity</legend>

Maka hasilnya akan seperti ini:

Bagaimana teman-teman cukup mudahkan Membuat Legend Berada di Tengah Pada Tag Filedset.

Sekian tutorial saya untuk kali ini tentang Cara Membuat Legend Berada di Tengah Pada Tag Filedset.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Legend Berada di Tengah Pada Tag Filedset

Kategori