Cara Membuat Halaman Registrasi Dengan JavaScript

Halaman registrasi pada sebuah website adalah elemen utama dalam sebuah website, karena memungkinkan pengguna dapat membuat akun dan mengakses lebih banyak fitur di situs kamu. Pada artikel kali ini, kamu akan belajar cara membuat halaman registrasi atau pendaftaran menggunakan JavaScript, seperti yang terlihat pada gambar berikut:

Gambar Form Registrasi

Sebelum melangkah lebih jauh, pastikan kamu telah membaca tutorial membuat halaman login di artikel sebelumnya:

Cara Membuat Login dengan JavaScript

Langkah-langkah Membuat Form Registrasi

1. Buat Struktur HTML Langkah awal, kamu bisa dengan membuat struktur dasar HTML untuk halaman registrasi. Berikut adalah contoh kode HTML yang bisa kamu gunakan:

<form onsubmit="return verifyRegistForm()">
            <div class="welcome-side">
                <img src="images.jfif" alt="Gambar Selamat Datang">
            </div>

            <div class="form-side">
                <h2>Daftar Akun Dulu Yuk</h2>

                <div>
                    <label for="first-name"></label>
               <input type="text" id="first-name" name="first-name" placeholder="Nama Depan" required>
                </div>

                <div>
                    <label for="last-name"></label>
                    <input type="text" id="last-name" name="last-name" placeholder="Nama Belakang" required>
                </div>
                <div>
                    <label for="email"></label>
                    <input type="email" id="email" name="email" placeholder="Email" required>
                </div>
                <div>
                    <label for="password"></label>
                    <input type="password" id="password" name="password" placeholder="Password" required>
                </div>
                <div>
                    <label>Jenis Kelamin</label>
                    <input type="radio" id="gender-man" name="gender" value="Laki-Laki">
                    <label for="gender-man">Laki-Laki</label>
                    <input type="radio" id="gender-women" name="gender" value="Perempuan">
                    <label for="gender-women">Perempuan</label>
                </div>
                <button type="submit" class="submit-button">Daftar</button>
                <p>Sudah punya akun? <a href="login.html">Masuk</a></p>
            </div>
        </form>

Penjelasan: <form onsubmit="return verifyRegistForm()"> Dalam pembuatan struktur dasar pada halaman registrasi, kamu perlu menggunakan tag

sebagai elemen utama untuk form input. Jangan lupa menambahkan action dengan atribut onsubmit pada tag <form> agar fungsi dari JavaScript bisa terpanggil saat form disubmit. Fungsi verifyRegistForm() berfungsi untuk memverifikasi form apakah sudah valid sebelum data terkirim.

2. Buat Struktur JavaScript Selanjutnya setelah halaman HTML siap, agar halaman registrasi berjalan kita memerlukan bantuan JavaScript untuk memverifikasi input dari pengguna dengan membuat kode seperti berikut:

function verifyRegistForm() {
    const firstName = document.getElementById("first-name").value;
    const lastName = document.getElementById("last-name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const genderMan = document.getElementById("gender-man").checked;
    const genderWomen = document.getElementById("gender-women").checked;

    // verif semua kolom terisi
    if (firstName === "" || lastName === "" || email === "" || password === "" || genderMan === "" || genderWomen === "") {
        alert("Tolong semua data dilengkapi");
        return false;
    }

    // verif panjang password
    if (password.length < 5) {
        alert("Panjang password minimal 6 karakter");
        return false;
    }

    // verif opsi gender
    if (!genderMan && !genderWomen) {
        alert("Tolong pilih salah satu opsi jenis kelamin");
        return false;
    }

    // Untuk menampilkan pesan sukses, jika semua verifikasi regist berhasil
    alert("Akun kamu berhasil terdaftar");
    return true;
}

Penjelasan: - Penggunaan id Pada file HTML kita telah menuliskan id untuk setiap field seperti (firstName, lastName, email, dsbnya), sehingga perlu menggunakan document.getElementById() pada JavaScript untuk mengambil nilai-nilai dari elemen tersebut.

- Verifikasi Kolom Input Buat verifikasi untuk semua kolom yang terisi. Hal ini untuk memeriksa apakah semua kolom input dari form telah terisi semua oleh user atau belum. Gunakan nilai return:false agar mencegah form langsung terkirim atau submit jika data belum terisi semua.

- Verifikasi Panjang Password Kamu bisa menggunakan fungsi .length untuk menghitung minimal karakter yang harus diisi pada kolom input password. Jika password kurang dari 6 karakter, peringatan atau alert akan muncul dan form tidak akan dikirim.

- Verifikasi Input Jenis Kelamin Perlu menambahkan verifikasi pilihan jenis kelamin atau gender dengan menggunakan !genderMan && !genderWomen untuk memerikasi apakah salah satu jenis kelamin sudah dipilih atau belum. Jika belum, peringatan atau alert akan muncul.

- Pesan Sukses Setelah semua kolom input terisi semua dengan benar, kamu perlu menambahkan pesan sukses dengan menggunakan alert("Akun kamu berhasil terdaftar"); agar user tau akunnya berhasil dibuat. Lalu, jangan lupakan menuliskan return true; agar formulir bisa dikirimkan setelah verifikasi berhasil.

3. Tambahkan Struktur CSS Untuk menambahkan estetika tampilan pada situs kamu, diperlukan CSS agar form terlihat lebih menarik dan mudah digunakan. Dengan menggunakan CSS, kamu bisa memberikan gaya pada setiap field atau elemen-elemen lainnya agar lebih menarik dan responsif.

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat halaman registrasi menggunakan HTML, CSS, dan JavaScript. Tutorial di atas dapat membantu kamu dalam melangkah ke satu tahapan dalam mengembangkan website yang interaktif dan memungkinkan pengguna untuk membuat akun.

Semangat belajar dan terus berpetualang mencari ilmu lainnya!

CARA MEMBUAT HALAMAN REGISTRASI DENGAN JAVASCRIPT

Berlatih membuat halaman registrasi sebagai aspek penting dalam sebuah website, sebab memungkinkan pengguna dapat membuat akun dan mengakses lebih banyak fitur di situs kamu.

Langkah-langkah Membuat Form Registrasi

Penulis: Zulfa Khoirun Nisa

Kursus online Javascript