Cara Membuat Formulir Pendaftaran Sederhana
3/29/2020
12 Comments
Konten [Tampil]
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?
ReplyDeletekalau itu kurang tau kak :(
Deleteada hasil output nya ga bro?
ReplyDeleteItu ada gambar tampilan akhirnya
DeleteCara muncul tampilan seperti hasil akhir itu bagaimana langkah-langkahnya ya kak?
ReplyDeleteharus pakai php kak,
DeleteLangkah-langkah agar muncul tampilan akhir seperti itu bagaimana ya kak?
ReplyDeleteharus mengaktifkan xampp terlebih dulu,
Deletebagaimana untuk melihat hasilnya ya, sebab waktu kita tekan daftar keluar script sukses.php
ReplyDeleteIya kak, harus diisikan dulu
Deletekak itu ngga ada fungsi cetak, hapus, edit?
ReplyDeleteTidak ada kak
Delete