Membuat Form Pendaftaran dengan Bootstrap

Membuat Form Pendaftaran dengan Bootstrap

Berikut adalah contoh kode untuk membuat form pendaftaran dengan menggunakan Bootstrap.

Form Pendaftaran

Form Pendaftaran

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Pendaftaran</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Form Pendaftaran</h1>
    <form>
      <div class="form-group">
        <label for="nama">Nama:</label>
        <input type="text" class="form-control" id="nama" placeholder="Masukkan nama">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Masukkan email">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" placeholder="Masukkan password">
      </div>
      <button type="submit" class="btn btn-primary">Daftar</button>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
HTML

Silakan salin kode di atas dan simpan dalam file HTML. Kemudian, buka file HTML tersebut di browser untuk melihat tampilan form pendaftaran yang menggunakan Bootstrap.

Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat form yang responsif dan menarik dengan sedikit usaha. Bootstrap menyediakan kelas CSS yang siap pakai untuk mengatur tata letak, gaya, dan perilaku elemen-elemen form.

Semoga contoh kode di atas dapat membantu Anda dalam membuat form pendaftaran yang menarik dan mudah digunakan menggunakan Bootstrap.

Leave a Reply

Your email address will not be published. Required fields are marked *