Cara Membuat Form Registrasi dengan HTML dan CSS

Cara Membuat Form Registrasi dengan HTML dan CSS – Dalam dunia web development, salah satu hal yang sering kali diperlukan adalah membuat form registrasi. Form registrasi memungkinkan pengguna untuk mendaftar ke dalam situs web atau aplikasi Anda. Dalam artikel ini, haikalweb akan membahas langkah-langkah detail untuk membuat form registrasi menggunakan HTML dan CSS. Langkah-langkah ini sangat mudah dipahami, bahkan untuk pemula sekalipun.

Alat yang Harus disiapkan

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

Perangkat laptop,
Web browser (disarankan menggunakan chrome),
Text editor code (Sublime text),
Niat yang kuat.

Cara Membuat Form Registrasi dengan HTML dan CSS

1. Buat Folder Project Form Registrasi

Langkah pertama yang perlu dilakukan adalah membuat folder project baru untuk form registrasi. Dalam folder ini, nantinya kita akan menempatkan semua file yang terkait dengan pembuatan form registrasi.

2. Buat Folder “img”

Di dalam folder project, buatlah sub-folder dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan dalam form registrasi kita. Download gambar disini untuk mengimplementasikan dalam project.

3. Buat Sebuah File “form_registrasi.html”

Selanjutnya, buatlah sebuah file baru dengan nama “form_registrasi.html” di dalam folder project. Ini adalah file utama yang akan berisi kode HTML untuk form registrasi kita. Mulailah dengan struktur dasar HTML seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Registrasi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="img/logo1.jpg" alt="Logo" class="logo">
        <h2>Form Registrasi</h2>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="username">Nama Pengguna:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">Alamat Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Kata Sandi:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Daftar</button>
        </form>
    </div>
</body>
</html>

4. Buat File “style.css”

Selanjutnya, kita perlu membuat file CSS yang akan digunakan untuk mendesain tampilan form registrasi. Buatlah file dengan nama “style.css” di dalam folder project. File ini akan berisi kode CSS untuk mengatur tata letak dan tampilan elemen-elemen dalam form registrasi.

Berikut ini file css yang harus Anda tambahkan:

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

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

.logo {
    width: 100px;
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

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

label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 10px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

5. Mengubah Tampilan Form Registrasi

Sekarang, kita akan mulai menambahkan elemen-elemen HTML dan menerapkan gaya CSS untuk form registrasi. Berikut adalah beberapa elemen yang umumnya terdapat dalam form registrasi:

Label dan input untuk nama pengguna
Label dan input untuk alamat email
Label dan input untuk kata sandi
Tombol “Daftar” untuk mengirimkan data registrasi

Pastikan untuk memberikan atribut id pada setiap elemen input, sehingga nantinya kita dapat merujuknya dalam CSS.

6. Save & View Tampilan

Setelah selesai mengkode form registrasi HTML dan CSS, simpan file dan buka file “form_registrasi.html” menggunakan browser web. Pastikan tampilan form registrasi sesuai dengan yang Anda inginkan. Jika perlu, lakukan penyesuaian tambahan pada kode HTML dan CSS untuk mencapai hasil yang diinginkan.