Cara memuat form php sederhana dengan css - OMJUAN.COM - Website Pragraming Learning
News Update
Loading...

9/20/2019

Cara memuat form php sederhana dengan css

Situs Layanan Source Code website Gratis Terbaik - Hallo teman-teman semua, kali ini saya akan membagikan sedikit codingan saya tentang Cara memuat form php sederhana dan rapi. ini merupakan codingan baru yang saya bagikan. berbeda seperti biasanya kali ini saya akan membagikan tentang web. mungkin dalam bebarapa waktu ke depan saya akan membagikan terus tentang codingan web. oke teman-teman langsung saya ya silahkan copy codingan di bawah ini.


CONTOH GAMBAR


SOURCE CODE



  • HTML CSS


  <!DOCTYPE html>

<html>

<head>

    <title>Masukkan Data</title>

    <style type="text/css">

     body{

   font-family: sans-serif;

   background: #d5f0f3;

  }

  h1{

   color:#50626C;

   text-align: center;

   font-family: sans-serif;

   text-transform: uppercase;

   padding: 5px;

   width: 490px;

   margin: auto;

   margin-bottom: 10px;

      margin-top: 20px;

  }

  .tulisan_data{

   text-align: center;

   text-transform: uppercase;

  }

  .kotak_data{

   width: 350px;

   background: white;

   margin: 80px auto;

   padding: 30px 20px;

  }

  input[type=text], input[type=password] {

      width: 100%;

      padding: 10px 10px;

      margin: 8px 0;

      display: inline-block;

      border: 1px solid #ccc;

      box-sizing: border-box;

  }

  button {

      background-color: #00A5AF;

      color: white;

      padding: 14px 20px;

      margin: 8px 0;

      border: none;

      cursor: pointer;

      width: 100%;

  }

    </style>

</head>

<body>

 <center>

  <br>

  <br>

  <br>

  <br>

 <h1>SELAMAT DATANG</h1>

   <form method="POST" action="proses.php">

  <div class="kotak_data">

  <table>


   <p class="tulisan_data">Masukkan Data</p>

   <tr>

    <td>Nim</td>

    <td>:</td>

    <td><input type="text" name="nim" value="nim"></td> 

   </tr>

   <tr>

    <td>Nama</td>

    <td>:</td>

    <td><input type="text" name="nama" value="nama"></td>

   </tr>

   <br>

   <tr>

    <td>Jenis Kelamin</td>

    <td>:</td>

    <td><input type="radio" name="jk" value="Mahasiswa" checked="checked">Pria &nbsp

     <input type="radio" name="jk" value="Mahasiswi">Wanita</td>

   </tr>

   <tr>

    <td></td>

    <td></td>

    <td><button name="btnmasuk" value="Masuk">Submit</button></td>

   </tr>   

  </table>

  </div>

  <br>

  </form> 

    </center>

</body>


</html>



  • PHP


<!DOCTYPE html>

<html>

<head>

 <title>HASIL</title>

 <style type="text/css">

  body{

   font-family: sans-serif;

   background: #d5f0f3;

  }

 .kotak_hasil{


   width: 350px;

   background: white;

   margin: 80px auto;

   padding: 30px 20px;

   }

 button {

      background-color: #00A5AF;

      color: white;

      padding: 10px 20px;

      margin: 8px 0;

      border: none;

      cursor: pointer;

      width: 100%;

  }

    </style>

</head>

<body>

 <center>

  <form method="POST" action="index.php">

  <div class="kotak_hasil">

  <?php

   $nim = $_POST['nim'];

   $nama = $_POST["nama"];

   $jk = $_POST['jk'];

   $sub_nim = substr($nim,0,2);

   $sub_nim_angkatan = substr($nim,4,2);

    echo "Selamat Datang ".$nama;

    echo "<br/>";

    echo "Anda adalah ".$jk;

    echo "<br/>";

    echo "Progdi "; 

    if ($sub_nim=='67') {

    echo "Teknik Informatika";

    }elseif ($sub_nim=='68') {

    echo "Sistem Informasi";

    }

    echo "<br/>";

    echo "Angkatan ";

    if ($sub_nim_angkatan=='19') {

     echo "2019";

    }elseif ($sub_nim_angkatan=='18') {

     echo "2018";

    }elseif ($sub_nim_angkatan=='17') {

     echo "2017";

    }elseif ($sub_nim_angkatan=='16') {

     echo "2016";

    }

  ?>

  <br>

  <br>

  <button>COBA LAGI</button>

  </form>

  </div>

 </center>

</body>

</html>

Share with your friends

1 comment

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih

Notification
This is just an example, you can fill it later with your own note.
Done
Asal SEO Responsive Blogger Template
Pro Version 2 Pro Dark Version Pro Version 1 Pro Version 5 Proversion 4 Pro Version 3
Eclipse Responsive Blogger Template
Pro Version 3 Pro Version 2 Pro Version 1