Cara Membuat Form Pendaftaran Siswa Baru dengan HTML dan CSS

By Posted on

Cara Membuat Form Pendaftaran Siswa Baru dengan HTML dan CSS – Dalam era digital yang semakin maju, kehadiran situs web telah menjadi krusial bagi lembaga pendidikan, baik itu sekolah, perguruan tinggi, atau lembaga kursus. Salah satu elemen penting dari situs web pendidikan adalah formulir pendaftaran siswa. Membuat formulir pendaftaran yang efisien, mudah dipahami, dan menarik secara visual dapat meningkatkan pengalaman pengguna dan mempercepat proses pendaftaran.

Dalam artikel ini, haikalweb akan membahas langkah demi langkah tentang cara membuat formulir pendaftaran siswa baru menggunakan bahasa pemrograman web yang paling dasar, yaitu HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets). Tidak hanya akan kami memberikan instruksi detail tentang pembuatan formulir, tetapi kami juga akan memastikan desainnya menarik dan unik, sehingga formulir pendaftaran Anda akan mencuri perhatian calon siswa.

Belajar membuat formulir pendaftaran siswa dengan HTML dan CSS bukan hanya tentang mengembangkan keterampilan teknis, tetapi juga tentang memahami pentingnya pengalaman pengguna yang baik dalam dunia web. Dengan pemahaman yang baik tentang cara membuat dan mendesain formulir, Anda dapat meningkatkan interaksi dengan pengguna situs web Anda, meningkatkan konversi pendaftaran, dan membangun reputasi institusi pendidikan Anda.

Mari kita mulai dengan langkah-langkah sederhana namun penting dalam membuat formulir pendaftaran siswa baru yang menarik dan efektif!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat form pendaftaran siswa baru dengan html dan css:

  • Perangkat laptop,
  • Web Browser (disarankan menggunakan Chrome),
  • Text editor code (Sublime text),
  • Niat yang kuat.

Cara Membuat Form Pendaftaran Siswa Baru dengan HTML dan CSS

1. Buat Folder Project Form Pendaftaran Siswa Baru

Mulailah dengan membuat folder proyek baru di komputer Anda. Anda dapat memberinya nama yang sesuai, misalnya “Form_Pendaftaran_Siswa_Baru“.

Artikel Terkait:  Cara Membuat Website Toko Online dengan HTML dan CSS

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang akan digunakan dalam formulir. Download gambar disini untuk di terapkan dalam project.

3. Buat Sebuah File form_pendaftaran_siswa_baru.html

Buka editor teks favorit Anda (seperti Notepad, Sublime Text, atau Visual Studio Code) dan buatlah file baru dengan nama “form_pendaftaran_siswa_baru.html“. Ini akan menjadi file utama tempat kita akan membuat formulir pendaftaran siswa.

Berikut ini file HTML yang harus Anda tambahkan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Pendaftaran Siswa Baru</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Mulai Formulir -->
    <div class="container">
        <form action="#" method="post">
            <h2>Form Pendaftaran Siswa Baru</h2>
            <div class="img-container">
                <img src="img/student-registration.jpg" alt="Student Registration Image">
            </div>
            <div class="form-group">
                <label for="nama">Nama:</label>
                <input type="text" id="nama" name="nama">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
            </div>
            <div class="form-group">
                <label for="telepon">Telepon:</label>
                <input type="tel" id="telepon" name="telepon">
            </div>
            <div class="form-group">
                <label for="alamat">Alamat:</label>
                <textarea id="alamat" name="alamat"></textarea>
            </div>
            <div class="form-group">
                <input type="submit" value="Daftar">
            </div>
        </form>
    </div>
    <!-- Akhir Formulir -->

</body>
</html>
 

4. Buat File style.css

Sekarang, buatlah file CSS untuk mengatur tampilan formulir pendaftaran siswa. Buat file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Website Makanan dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan:

/* style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

.container {
    width: 50%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

.img-container {
    text-align: center;
    margin-bottom: 20px;
}

.img-container img {
    width: 200px;
    border-radius: 50%;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}
 

5. Mengubah Tampilan Form Pendaftaran Siswa Baru

Sekarang, Anda dapat mengubah tampilan formulir sesuai keinginan Anda dengan mengedit file CSS “style.css“. Anda dapat mengubah warna latar belakang, ukuran font, atau menambahkan dekorasi lainnya.

6. Simpan & Lihat Tampilan

Simpan semua perubahan yang telah Anda buat pada file HTML dan CSS, dan buka file “form_pendaftaran_siswa_baru.html” di browser web Anda untuk melihat hasilnya.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat formulir pendaftaran siswa baru dengan HTML dan CSS. Semoga artikel ini bermanfaat bagi Anda yang sedang belajar pengembangan web!

Related posts: