Cara Membuat Formulir Pendaftaran Sederhana

Konten [Tampil]
Cara Membuat Formulir Pendaftaran Sederhana - Pada kesempatan kali ini saya akan share cara membuat halaman formulir atau form sederhana tanpa menggunakan database. Cara ini menggunakan HTML, CSS, dan PHP. Langsung saja simak tutorial yang saya berikan.

Untuk demonya cek: Form Input

Pengertian Form

Form merupakan salah satu bentuk halaman website yang digunakan untuk menerima masukkan dari pengguna. Selanjutnya masukkan dari pengguna tersebut diolah menggunakan bahasa pemograman web, baik secara server side scripting ataupun client side scripting.

Cara Membuat Form Tanpa Database Sederhana

1. Langkah pertama sebelum anda lakukan adalah membuka Notepad++, XAMPP, dan kemudian buat file "index.html", "aksi.php". Dan buat kedua files tersebut kedalam satu folder.

2. Kemudian salin kode script dibawah ini kedalam file "index.html".
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Input - AnsoriWeb</title>
</head>
<style>
  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;
  text-transform: capitalize;
}
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;
}

@media (min-width: 400px) {
  form {
    overflow: hidden;
  }
  label {
    float: left;
    width: 200px;
  }
  input {
    float: left;
    width: calc(100% - 200px);
  }


  button {
    float: right;
    width: calc(100% - 200px);
  }

}
</style>
<body>
<form action="aksi.php" method="GET">
<h1 align="center">Membuat Input Tanpa Database</h1>
<p align="center">Tutorial by <a href="https://www.ansoriweb.com" target="blank">AnsoriWeb.com</a></p>
<label>Nama Lengkap:</label>
    <input name="nama" type="text">
    <label>No Absen:</label>
    <input name="noabsen" type="text">
    <label>Kelas:</label>
    <input name="email" type="text">
    <label>Nama Sekolah:</label>
    <input name="sekolah" type="text">
    <button>Kirim</button>
</form>
</body>
</html>
Cara Membuat Form Input Tanpa Database HTML PHP
Tampilan file "index.html", jika dibuka dibrowser
3. Kemudian salin script kode dibawah ini dan pastekan di "aksi.php".
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Input - AnsoriWeb</title>
</head>
<style>
  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;
  text-transform: capitalize;
}
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;
}

@media (min-width: 400px) {
  form {
    overflow: hidden;
  }
  label {
    float: left;
    width: 200px;
  }
  input {
    float: left;
    width: calc(100% - 200px);
  }


  button {
    float: right;
    width: calc(100% - 200px);
  }

}
</style>
<body>
<form>
<h1 align="center">Data Berhasil Terkirim!</h1>
<p align="center">Tutorial by <a href="https://www.ansoriweb.com" target="blank">AnsoriWeb.com</a></p>
<label>Nama Lengkap: <?php echo $_GET["nama"]; ?></label>
    <label>No Absen: <?php echo $_GET["noabsen"]; ?></label>
    <label>
    <label>Kelas: <?php echo $_GET["kelas"]; ?></label>
 
    <label>Nama Sekolah: <?php echo $_GET["sekolah"]; ?></label>
 
</form>
</body>
</html>
4. Setelah itu silahkan disimpan. Untuk tampilannya atau demonya bisa klik disini.

Kesimpulan

Itulah tadi cara membuat form input tanpa database, tutorial yang saya berikan ini sangat sederhana untuk yang belum tahu saja dan yang masih bingung dengan cara membuatnya.

Sekian dari saya apabila ada kesalahan mohon dimaafkan, terimakasih :).

Belum ada Komentar untuk "Cara Membuat Formulir Pendaftaran Sederhana"

Posting Komentar

Berkomentarlah dengan Bijak !!!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel