Cara Membuat Formulir Pendaftaran Sederhana

Cara Membuat Formulir Pendaftaran Sederhana
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)

  1. Sublime Text
  2. Notepad++
  3. Komodo Edit
  4. Atom
  5. BlueFish
  6. Vim
  7. Emacs
  8. 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 

Cara Membuat 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...
Next Post Previous Post
16 Comments
  • Riio
    Riio 12 August, 2020 13:29

    cara biar yang daftar masuk ke email kita giman kak?

    • Ahmad Ansori
      Ahmad Ansori 17 August, 2020 20:22

      kalau itu kurang tau kak :(

  • Raveryn
    Raveryn 04 October, 2020 23:32

    ada hasil output nya ga bro?

    • Ahmad Ansori
      Ahmad Ansori 05 October, 2020 05:55

      Itu ada gambar tampilan akhirnya

  • Dila
    Dila 13 December, 2020 02:52

    Cara muncul tampilan seperti hasil akhir itu bagaimana langkah-langkahnya ya kak?

    • Ahmad Ansori
      Ahmad Ansori 14 December, 2020 09:34

      harus pakai php kak,

  • Dila
    Dila 13 December, 2020 02:53

    Langkah-langkah agar muncul tampilan akhir seperti itu bagaimana ya kak?

    • Ahmad Ansori
      Ahmad Ansori 14 December, 2020 09:35

      harus mengaktifkan xampp terlebih dulu,

  • as
    as 30 December, 2020 10:33

    bagaimana untuk melihat hasilnya ya, sebab waktu kita tekan daftar keluar script sukses.php

    • Ahmad Ansori
      Ahmad Ansori 02 January, 2021 20:51

      Iya kak, harus diisikan dulu

  • dyahkml
    dyahkml 28 February, 2021 11:16

    kak itu ngga ada fungsi cetak, hapus, edit?

    • Ahmad Ansori
      Ahmad Ansori 01 March, 2021 05:27

      Tidak ada kak

  • sistem operasi
    sistem operasi 10 March, 2021 16:35

    untuk melihat database yg sudah daftar gimana ya kak?

    • Ahmad Ansori
      Ahmad Ansori 10 March, 2021 19:18

      untuk form diatas hanya input dna output saja kak.

  • Unknown
    Unknown 06 May, 2021 13:28

    Saya Rama, artikenya bagus kak

  • zaenal
    zaenal 12 December, 2021 10:52

    maaf kak mau tanya apakah ini sudah terhubung dengan mysql?

Add Comment
comment url