Cara Membuat Formulir Pendaftaran Sederhana
Untuk demonya cek: Form Pendaftaran
Pengertian Formulir Pendaftaran
Formulir Pendaftaran merupakan formulir yang digunakan untuk mendaftarkan suatu kegiatan organisasi maupun mendaftarkan sekolah atau bimbingan belajar. Dimana kita dengan menggunakan formulir dinyatakan berhasil masuk atau sudah mendaftar menjadi siswa/anggota.
Cara Membuat Formulir Pendaftaran
1. Langkah pertama: buka Notepad, dan buat 2 buah files disatu folder. Dan beri nama dengan "index.html" dan "sukses.php".
Dan disini anda membutuhkan XAMPP untuk mengakses halaman tersebut. Karena pemograman PHP hanya bisa diakses diaplikasi xampp. Jika anda tidak mempunyai aplikasi ini silahkan download terlebih dahulu disitus resminya.
Tetapi selain menggunakan Notepad, anda bisa menggunakan aplikasi text editor seperti:
Visual Studio Code (VSC)
Tetapi selain menggunakan Notepad, anda bisa menggunakan aplikasi text editor seperti:
Visual Studio Code (VSC)
- Sublime Text
- Notepad++
- Komodo Edit
- Atom
- BlueFish
- Vim
- Emacs
- dan sebagainya..
2. Setelah membaca langkah pertama, silahkan copy script kode dibawah ini ke file "index.html".
<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran - Ansori Web</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
form {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
form input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
form button {
background: lightgrey;
padding: 0.7em;
border: 0;
}
form button:hover {
background: green;
color: white;
}
form span a{
background: lightblue;
padding: 0.7em;
border: 0;
text-decoration: none;
color: black;
text-align: center;
}
form span a:hover {
background: blue;
color: white;
}
label {
text-align: right;
display: block;
padding: 0.5em 1.5em 0.5em 0;
}
input {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
input:focus {
outline: 3px solid green;
}
select {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
select:focus {
outline: 3px solid green;
}
@media (min-width: 400px) {
form {
overflow: hidden;
}
label {
float: left;
width: 200px;
}
input {
float: left;
width: calc(100% - 200px);
}
select {
float: left;
width: calc(100% - 200px);
}
button {
float: right;
width: calc(100% - 200px);
}
</style>
</head>
<body>
<form action="sukses.php" method="GET">
<h1 align="center">Formulir Pendaftaran</h1>
<p align="center">by <a href="" target="blank">ansoriweb</a></p>
<label>Nama Lengkap</label>
<input name="nama_lengkap" type="text">
<label>Tempat Lahir</label>
<input name="tempat_lahir" type="text">
<label>Tanggal Lahir</label>
<input name="tanggal_lahir" type="date">
<label>Jenis Kelamin</label>
<select name="jenis_kelamin">
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
<label>Alamat Lengkap</label>
<input name="alamat" type="text">
<label>E-mail</label>
<input name="email" type="text">
<label>No.HP</label>
<input name="no_hp" type="text">
<button>Daftar</button>
</form>
</body>
</html>3. Kemudian silahkan copy script kode dibawah ini dan letakkan di "sukses.php".
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Berhasil!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
form {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
form input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
form button {
background: lightgrey;
padding: 0.7em;
border: 0;
}
form button:hover {
background: green;
color: white;
}
form span a{
background: lightblue;
padding: 0.7em;
border: 0;
text-decoration: none;
color: black;
text-align: center;
}
form span a:hover {
background: blue;
color: white;
}
label {
text-align: right;
display: block;
padding: 0.5em 1.5em 0.5em 0;
}
input {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
input:focus {
outline: 3px solid green;
}
select {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
select:focus {
outline: 3px solid green;
}
@media (min-width: 400px) {
form {
overflow: hidden;
}
label {
float: left;
width: 200px;
}
input {
float: left;
width: calc(100% - 200px);
}
select {
float: left;
width: calc(100% - 200px);
}
button {
float: right;
width: calc(100% - 200px);
}
</style>
</style>
</head>
<body>
<form>
<h1>Pendaftaran Kamu Berhasil!</h1>
<p>
Nama Lengkap: <?php echo $_GET["nama_lengkap"]; ?><br>
TTL: <?php echo $_GET["tempat_lahir"]; ?>, <?php echo $_GET["tanggal_lahir"]; ?><br>
Jenis Kelamin: <?php echo $_GET["jenis_kelamin"]; ?><br>
Alamat Lengkap: <?php echo $_GET["alamat"]; ?><br>
E-mail: <?php echo $_GET["email"]; ?><br>
No.HP: <?php echo $_GET["no_hp"]; ?>
</p>
</form>
</body>
</html> Tampilan Formulir Pendaftaran Sederhana
Kesimpulan
Jadi Formulir Pendaftaran merupakan formulir yang digunakan untuk mendaftarkan suatu kegiatan organisasi maupun mendaftarkan sekolah atau bimbingan belajar.
Demikian Cara Membuat Formulir Pendaftaran Sederhana, semoga bermanfaat. Jika ada pertanyaan mengenai artikel diatas jangan sungkan untuk bertanya ya :). Selamat Belajar...
cara biar yang daftar masuk ke email kita giman kak?
kalau itu kurang tau kak :(
ada hasil output nya ga bro?
Itu ada gambar tampilan akhirnya
Cara muncul tampilan seperti hasil akhir itu bagaimana langkah-langkahnya ya kak?
harus pakai php kak,
Langkah-langkah agar muncul tampilan akhir seperti itu bagaimana ya kak?
harus mengaktifkan xampp terlebih dulu,
bagaimana untuk melihat hasilnya ya, sebab waktu kita tekan daftar keluar script sukses.php
Iya kak, harus diisikan dulu
kak itu ngga ada fungsi cetak, hapus, edit?
Tidak ada kak
untuk melihat database yg sudah daftar gimana ya kak?
untuk form diatas hanya input dna output saja kak.
Saya Rama, artikenya bagus kak
maaf kak mau tanya apakah ini sudah terhubung dengan mysql?