Cara Membuat Form Inputan dengan HTML, CSS, dan PHP merupakan hal dasar yang wajib dikuasai para programmer pemula.
Dilansir dari situs www.duniaprogramming.com Form merupakan elemen penting dalam pembuatan website, terutama dalam mengumpulkan data dari pengguna. Form digunakan untuk memungkinkan pengguna mengisi dan mengirim informasi ke server.
Dengan menggunakan HTML, CSS, dan PHP, Anda dapat membuat form inputan yang interaktif dan responsif. Berikut adalah langkah-langkah cara membuat form inputan dengan HTML, CSS, dan PHP.
Source Code Form untuk HTML
< form method="post" action="proses.php" >
< label for="nama" >Nama:
< input type="text" id="nama" name="nama" required >< label for="email" >Email:
< input type="email" id="email" name="email" required >< label for="pesan" >Pesan:
< textarea id="pesan" name="pesan" required >< input type="submit" value="Kirim" >
Pada contoh di atas, kita menggunakan elemen
untuk membungkus form inputan. Atribut method="post" digunakan untuk mengirim data form menggunakan metode POST ke file proses.php. Setiap inputan di dalam form memiliki atribut name yang akan digunakan untuk mengidentifikasi data yang dikirim ke server.
Desain CSS Form
Untuk membuat tampilan form yang menarik, kita dapat menggunakan CSS untuk mengatur styling elemen-elemen form. Berikut adalah contoh kode CSS untuk desain form:
form {
width : 300px;
margin : 0 auto;
}label {
display : block;
margin-bottom : 10px;
}input,
textarea {
width : 100%;
padding : 5px;
margin-bottom : 10px;
}input[type="submit"] {
background-color : #4CAF50;
color : white;
border : none;
padding : 10px;
cursor : pointer;
}
Pada contoh di atas, kita menggunakan CSS untuk mengatur lebar form, tata letak label, dan gaya inputan dan tombol submit. Anda dapat menyesuaikan kode CSS tersebut sesuai dengan preferensi desain Anda.
Sistem PHP dan Struktur Database
Setelah form dikirim, data yang diisi oleh pengguna akan dikirim ke server menggunakan PHP. Berikut adalah contoh kode PHP sederhana untuk mengolah data yang dikirim dari form:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$nama = $_POST['nama'];
$email = $_POST['email'];
$pesan = $_POST['pesan'];// Lakukan operasi lain dengan data yang diterima, seperti menyimpan ke database
// …// Redirect ke halaman lain setelah form berhasil dikirim
header('Location: sukses.html');
exit;
}
?>
Pada contoh di atas, kita menggunakan $_POST untuk mengakses data yang dikirim dari form. Anda dapat melakukan operasi lain dengan data tersebut, seperti menyimpannya ke database atau mengirim email pemberitahuan. Setelah operasi selesai, Anda dapat mengarahkan pengguna ke halaman lain menggunakan header('Location: sukses.html').
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat form inputan yang interaktif dan responsif menggunakan HTML, CSS, dan PHP.
Form tersebut dapat digunakan untuk mengumpulkan data dari pengguna dan mengirimnya ke server untuk diproses lebih lanjut. Dengan pengaturan CSS yang tepat, Anda juga dapat mendesain tampilan form agar lebih menarik dan sesuai dengan kebutuhan.
Jangan lupa untuk menggunakan sistem PHP untuk mengolah data yang diterima dan melakukan operasi lain, seperti menyimpan data ke database. Selamat mencoba!