Cara Membuat Form Pendaftaran HTML dan CSS

Cara Membuat Form Pendaftaran HTML dan CSS – Mempelajari cara membuat form pendaftaran dengan HTML dan CSS adalah langkah pertama yang penting bagi para pemula dalam pengembangan web. Dalam dunia digital yang terus berkembang, memiliki kemampuan untuk membuat form pendaftaran yang menarik dan mudah dipahami merupakan keterampilan yang sangat berharga.

Dalam artikel ini, riztekno akan membahas langkah-langkah detail untuk membuat form pendaftaran menggunakan HTML dan CSS. Mulai dari pembuatan folder proyek hingga mengatur tampilan form, Anda akan dipandu melalui setiap langkah dengan jelas dan mudah dipahami.

Dengan mengikuti panduan ini, Anda akan dapat membuat form pendaftaran yang dapat diintegrasikan ke dalam situs web Anda sendiri. Selain itu, pemahaman yang Anda peroleh dari proses ini akan membantu Anda membangun dasar yang kuat dalam pengembangan web.

Jadi, mari kita mulai dengan langkah pertama: pembuatan folder proyek untuk form pendaftaran.

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk membuat form pendaftaran dengan html dan css:

  • Perangkat laptop,
  • Notepad++(Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Form Pendaftaran HTML dan CSS

1. Buat Folder Project Form Pendaftaran

Pertama, buatlah sebuah folder di dalam direktori proyek Anda dan beri nama “form_pendaftaran“.

2. Buat Folder “img”

Di dalam folder “form_pendaftaran“, buatlah folder baru dan namai sebagai “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang mungkin Anda gunakan dalam form pendaftaran. Download gambar disini untuk diterapkan dalam proyek form pendaftaran.

3. Buat Sebuah File form_pendaftaran.html

Buka editor teks atau IDE favorit Anda, lalu buatlah sebuah file baru dengan nama form_pendaftaran.html di dalam folder “form_pendaftaran”. Ini akan menjadi file utama yang akan berisi kode HTML untuk form pendaftaran.

Berikut ini source code hmtl yang harus Anda tambahkan untuk membuat form pendaftaran dengan html dan css:

<!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="style.css">
</head>
<body>
  <div class="container">
    <div class="content">
      <div class="form-container">
        <h2>Form Pendaftaran</h2>
        <form action="#" method="POST">
          <div class="form-group">
            <label for="nama">Nama:</label>
            <input type="text" id="nama" name="nama" required>
          </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
          </div>
          <div class="form-group">
            <label for="telepon">Telepon:</label>
            <input type="tel" id="telepon" name="telepon" required>
          </div>
          <div class="form-group">
            <label for="pesan">Pesan:</label>
            <textarea id="pesan" name="pesan" rows="4" required></textarea>
          </div>
          <button type="submit">Kirim</button>
        </form>
      </div>
      <div class="image-container">
        <img src="img/GambarForm.jpg" alt="Gambar Pendaftaran">
      </div>
    </div>
  </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS dengan nama style.css di dalam folder “form_pendaftaran“. File ini akan digunakan untuk mengatur tampilan dari form pendaftaran.

Artikel Terkait:   Cara Membuat Website Pemerintahan dengan HTML dan CSS

Berikut ini source code css yang harus Anda tambahkan untuk membuat form pendaftaran dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .content {
    max-width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    flex: 1;
  }
  
  .form-container h2 {
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .image-container {
    flex: 1;
    text-align: center;
  }
  
  .image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
 

5. Mengubah Tampilan Form Pendaftaran

Anda dapat menyesuaikan tampilan form pendaftaran dengan mengedit file style.css. Cobalah untuk bereksperimen dengan warna, font, ukuran, dan properti CSS lainnya sesuai dengan preferensi dan kebutuhan desain Anda.

6. Save & View Tampilan

Simpan semua perubahan yang telah Anda buat, lalu buka file form_pendaftaran.html menggunakan browser web untuk melihat tampilan form pendaftaran yang telah Anda buat.

Preview hasil

Berikut ini preview hasil form pendaftaran html dan css jika Anda berhasil membuatnya:

Penutup

Mempelajari cara membuat form pendaftaran dengan HTML dan CSS adalah langkah penting bagi setiap pemula dalam dunia pengembangan web. Dalam artikel ini, Anda telah diajak melalui langkah-langkah detail untuk membuat form pendaftaran yang menarik dan mudah dipahami, mulai dari pembuatan folder proyek hingga pengaturan tampilan dengan CSS.

Artikel Terkait:   Cara Membuat Halaman Utama Website dengan HTML dan CSS

Dengan semakin meningkatnya kebutuhan akan kehadiran online, kemampuan untuk membuat form pendaftaran yang responsif dan estetis menjadi semakin penting. Dengan menguasai teknik-teknik dasar HTML dan CSS seperti yang telah dijelaskan dalam artikel ini, Anda telah melangkah lebih dekat untuk menciptakan pengalaman pengguna yang memuaskan bagi pengunjung situs web Anda.

Ingatlah untuk terus berlatih dan bereksperimen dengan desain dan fungsionalitas form pendaftaran Anda. Setiap proyek yang Anda kerjakan merupakan kesempatan untuk mengasah keterampilan Anda dalam pengembangan web.

Jangan ragu untuk mencari sumber daya tambahan dan terhubung dengan komunitas pengembang web untuk terus memperdalam pengetahuan Anda. Dengan komitmen dan dedikasi, Anda akan menjadi seorang yang mahir dalam mengembangkan situs web yang memikat.

Sekarang, dengan langkah-langkah yang telah Anda pelajari, Anda siap untuk memulai perjalanan Anda dalam menciptakan form pendaftaran yang menakjubkan. Selamat mencoba, dan semoga sukses dalam pengembangan web Anda!