Konten [Tampil]

Cara Membuat Formulir Pendaftaran Sederhana - Diartikel kali ini saya membuat sebuah halaman formulir pendaftaran sederhana dengan HTML dan PHP, yang bisa kamu terapkan untuk mengerjakan tugas atau hanya sekedar referensi saja.

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)

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...