Tutorial Membuat Formulir Pendaftaran dengan HTML dan PHP

Halo Guys! Pada tutorial kali ini, kita akan belajar cara membuat formulir pendaftaran sederhana menggunakan HTML dan PHP. Formulir ini akan memungkinkan pengguna untuk memasukkan informasi mereka, dan setelah itu, data akan diproses menggunakan PHP. Mari kita mulai!

Table of Contents

Langkah 1: Membuat Formulir HTML

Pertama, kita akan membuat file HTML yang berisi formulir pendaftaran. Buatlah file baru dengan nama register.html dan masukkan kode berikut:

html

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formulir Pendaftaran</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Formulir Pendaftaran</h1>

    <form action="process.php" method="POST">

        <label for="name">Nama:</label>

        <input type="text" id="name" name="name" required><br><br>


        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required><br><br>


        <label for="password">Kata Sandi:</label>

        <input type="password" id="password" name="password" required><br><br>


        <input type="submit" value="Daftar">

    </form>

</body>

</html>

Langkah 2: Menambahkan CSS

Untuk membuat tampilan formulir lebih menarik, kita bisa menambahkan sedikit CSS. Buatlah file baru dengan nama style.css dan masukkan kode berikut:

REEED Panduan Minimum Requirement untuk Instalasi Proxmox VE yang Optimal

css

body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    margin: 0;

    padding: 20px;

}


h1 {

    color: #333;

}


form {

    background: #fff;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}


label {

    display: block;

    margin-bottom: 5px;

}


input[type="text"],

input[type="email"],

input[type="password"] {

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    border-radius: 4px;

}


input[type="submit"] {

    background-color: #5cb85c;

    color: white;

    padding: 10px 15px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}


input[type="submit"]:hover {

    background-color: #4cae4c;

}

Langkah 3: Memproses Data dengan PHP

Setelah formulir diisi dan dikirim, kita perlu memproses data tersebut menggunakan PHP. Buatlah file baru dengan nama process.php dan masukkan kode berikut:

php

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = htmlspecialchars($_POST['name']);

    $email = htmlspecialchars($_POST['email']);

    $password = htmlspecialchars($_POST['password']);


    // Di sini Anda bisa menambahkan kode untuk menyimpan data ke database


    echo "<h1>Terima kasih, $name!</h1>";

    echo "<p>Email Anda: $email</p>";

} else {

    echo "Metode permintaan tidak valid.";

}

?>

Kesimpulan

Selamat! Anda telah berhasil membuat formulir pendaftaran sederhana menggunakan HTML dan PHP. Anda bisa mengembangkan lebih lanjut dengan menambahkan validasi, menyimpan data ke database, atau menambahkan fitur lainnya.

Jangan ragu untuk memberikan komentar di bawah tentang tutorial apa yang ingin Anda buat selanjutnya, Guys! Kami senang mendengar masukan dari Anda.

REEED Tutorial Menjadi Power Rangers di Bidang Informatika