Design Bootstrap

Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Panduan langkah demi langkah membuat form login modern dan responsif menggunakan HTML, CSS, Bootstrap 5, serta JavaScript sederhana.

Contoh coding Contoh Coding Form Login HTML, CSS, dan Bootstrap 5
Langkah 2 dari 9

Membuat Struktur Dasar HTML dan Memasang Bootstrap

Buka index.html, lalu buat struktur dasar berikut:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Contoh form login responsif menggunakan HTML, CSS, dan Bootstrap 5.">
  <title>Login | KodingPlus Demo</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Konten form akan diletakkan di sini. -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Bagian yang perlu diperhatikan:

  • lang="id" menjelaskan bahwa bahasa utama halaman adalah bahasa Indonesia.
  • meta viewport diperlukan agar tampilan mengikuti lebar layar perangkat.
  • CSS Bootstrap ditempatkan di dalam <head>.
  • style.css diletakkan setelah Bootstrap supaya aturan khusus kita dapat menyesuaikan gaya bawaan.
  • JavaScript diletakkan menjelang penutup </body> agar elemen HTML sudah tersedia saat script dijalankan.

Versi pada contoh ini mengikuti Bootstrap 5.3.8 dan Bootstrap Icons 1.13.1 yang tercantum pada dokumentasi resmi ketika tutorial disusun.

Referensi Lain

Contoh coding terkait