Cara Memasukan Legend Pada Fieldset di Bootstrap

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Memasukan Legend Pada Fieldset di Bootstrap.

Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut. Secara keseluruhan akan mempermudah user dalam mengisi form dan mempercantik tampilan form.

Sekarang saya akan mencoba membuatnya dengan menggunakan framework bootstrap,karena di bootstrap sudah menyediakan suatu class untuk membuat pop-up tersebut. Berikut tutorial singkat tentang Cara Memasukan Legend Pada Fieldset di Bootstrap:

– Pertama teman-teman download framework bootstrapnya dulu.

– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

– Ketiga kita buat fieldset, legend dan formnya. Berikut kode html-nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <fieldset class="scheduler-border">
            <legend class="scheduler-border">Silahkan Masuk</legend>
            <form role="form" action="" method="post" class="login-form">
                  <div class="form-group">
                      <input type="text" name="form-username" placeholder="Nama Pengguna" class="form-username form-control" id="form-username">
                    </div>
                    <div class="form-group">
                      <input type="password" name="form-password" placeholder="Password" class="form-password form-control" id="form-password">
                    </div>
                    <button type="submit" class="btn masuk">Masuk!</button>
            </form>
        </fieldset>
      </div>
    </div>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Apabila di jalankan di broswer makan akan tampil seperti ini:

– Ke-empat kita buat custom.css nya untuk membuat tag legendnya berada sejajar dengan garis border pada fieldset dan mempercantik tampilannya sedikit. Berikut custom.css nya:

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
    border: 5px solid #6f92d3 !important;
    border-radius: 12px;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:auto;
    padding:0 10px;
    border-bottom:none;
    margin-bottom: 5px;
}

.login-form {
	margin-top: 20px;
}
.container {
	margin-top: 80px;
}

– Hasilnya akan menjadi seperti ini:

Bagaimana teman-teman cukup mudahkan Memasukan Legend Pada Fieldset di Bootstrap.

Sekian artikel saya hari ini tentang Cara Memasukan Legend Pada Fieldset di Bootstrap Sehat selalu ya teman-teman, selamat mencoba.