Cara Membuat form dihtml beserta PHPnya

Masih ingatkah anda tentang formulir pendafaran yang sering kalian isi saat mau mendaftar ??!!!
Apakah kalian masih ingat tampilannya??!! Hehehe...
Kali ini aku mau sharing Cara membuat form mengggunakan html beserta Cara memanggilnya. Namun sebelum itu, kalian juga harus sudah punya aplikasi tambahan, yaitu xampp. Ada yang belum tau xampp???
Bagi yang belum tau xampp, saya jelaskan sedikit yaa menurut versi saya, Xampp merupakan aplikasi localhost yang mampu menjalankan MySQL, phpmyadmin, serta PHP dan html sendiri. Untuk lebih detailnya kalian cari sendiri yaa...Yang belum punya xampp, silahkan buka Download xampp 1.8.3 for windows
Sebelum kalian membuat formnya, saya akan jelaskan beberapa atribut yang ada dalam pembuatan form html. Atribut-atributnya yaitu :

1.  Textfield, untuk membuat sebuah tempat yang bisa diinputkan. Misalnya, di form, anda disuruh memasukkan nama anda dikolom nama. Nah, text field itu adalah kolom untuk mengisi nama anda tsb.
Kurang lebih kodenya seperti ini

<td width="149">Nama </td>
        <td width="300"><input type="text" name="nama" size="50" />
        </td>

2. Radio button, untuk membuat sebuah pilihan yang didalamnya terdapat beberapa pilihan. Misalnya, diform anda disuruh mengisi jenis kelamin, disitu pasti ada dua pilihan, antara laki-laki dan perempuan. Nah fungsi Radio button seperti itu.
Kurang lebih kodenya seperti ini

<td>Jenis kelamin</td>
        <td><input type="radio" name="gender" size="50"
        value="P" />
          Pria<br />
          <input type="radio" name="gender" size="50"
        value="W" />
          Wanita<br /></td>

3. Checkbox, untuk membuat beberapa pilihan dari banyak pilihan. Misalnya kalian mengisi form  yang didalamnya disuruh memilih beberapa pillihan dalam banyak pilihan. Hobby misalnya, diform telah disediakan beberapa macam hobby, diantaranya : memancing, makan, menggambar, menulis, bernyanyi. Dan hobby kalian ada beberapa disitu, misalnya makan, menggambar, menulis, bernyanyi. Maka hal yang kalian lakukan adalah memilih beberapa pilihan. Nah itulah fungsi dari checkbox
Kurang lebih kodenya seperti ini :

<td>Hobby</td>
        <td><input type="checkbox" name="hobi[]"
value="Balap liar" />
          Balap liar<br/>
          <input type="checkbox" name="hobi[]"
value="Memancing emosi" />
          Memancing emosi<br />
          <input type="checkbox" name="hobi[]"
value="Membaca pikiran" />
          Membaca pikiran<br />
          <input type="checkbox" name="hobi[]"
value="Travelling jungle" />
          Travelling jungle<br />
          <input type="checkbox" name="hobi[]"
value="Mesum" />
          Mesum<br/>
          <input type="checkbox" name="hobi[]"
value="Makan" />
          Makan<br/>
          <input type="checkbox" name="hobi[]"
value="Shopping" />
          Shopping<br/>
          <input type="checkbox" name="hobi[]"
value="Hidup" />
          Hidup<br/>
          <input type="checkbox" name="hobi[]"
value="Tiduuurrr" />
          Tiduuurrr<br/>
          <input type="checkbox" name="hobi[]"
value="Habisin Uang" />
          Habisin Uang<br/>
          <input type="checkbox" name="hobi[]"
value="Pacaran" />
          Pacaran<br/></td>

4. Option, untuk memilih satu pilihan dari beberapa pilihan. Hampir mirip dengan Radiobutton, namun perbedaanya pada tampilannya saja. Kurang lebih kodenya seperti ini :

 <td>kota asal</td>
        <td><select name="kota asal">
          <option value="surabaya">surabaya</option>
          <option value="sidoarjo">sidoarjo</option>
          <option value="semarang">Semarang</option>
          <option value="jakarta">Jakarta</option>
          <option value="bandung">bandung</option>
          <option value="bogor">bogor</option>
          <option value="denpasar">denpasar</option>
          <option value="mojokerto">mojokerto</option>
          <option value="bekasi">bekasi</option>
        </select></td>

5. Text area, untuk membuat sebuah text area. Kurang lebih kodenya seperti ini :

<td>Masukan Anda</td>
        <td><textarea name="descript" cols="35" rows="10"></textarea></td>

Nah, sekarang kita sudah mengerti beberapa atribut dalam form html. Sekarang kita coba membuat form htmlnya yang terdiri dari textfield, radiobutton, check box, option dan text area. Setelah kita membuat form htmlnya, kita buat sekalian PHPnya untuk memanggil hasil inputan form yang telah kita buat.

1. Buka notepad kalian, jika kalian punya Dreamweaver, buka dreamweaver kalian. Copy kode dibawah ini dinotepad / dreamweaver kalian, dan simpan dengan nama narumi.html. Jangan lupa save as type harus all file !!!, baik dinotepad maupun di dreamweaver

Kode untuk membuat form htmlnya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>aie</title>
<style type="text/css">
<!--
body,td,th {
    margin-top: 100px;
    margin-right: 80px;
    margin-bottom: 80px;
    margin-left: 320px;
    font-family: "Blackadder ITC";
    font-size:24px;
    color: #FF6600;
}
body {
    margin-left: 270px;
}
-->
</style></head>
<body>
<form action="aie.php" method="post">

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Silahkan Mengisi Biodata sesuai Biodata Anda </p>

  </blink>
  <p>&nbsp;</p>
  <p>
    Nama                :<br/>
                          <input type="text" name="nama" size="50" /><br/>
    Nama Lengkap        :<br/>
                          <input type="text" name="nick" size="50"/><br/>
    Alamat                :<br/>
                          <input type="text" name="alamat" size="50" /><br/>
    Jenis Kelamin        :<br/>
                          <input type="radio" name="gender" size="50" value="P" />Pria<br />
                          <input type="radio" name="gender" size="50" value="W" />Wanita<br />
    TTL                    :<br/>
                        <select name="tmp">
          <option value="surabaya">surabaya</option>
          <option value="sidoarjo">sidoarjo</option>
          <option value="jombang">jombang</option>
          <option value="jakarta">Jakarta</option>
          <option value="bandung">bandung</option>
          <option value="bogor">bogor</option>
          <option value="denpasar">denpasar</option>
          <option value="mojokerto">mojokerto</option>
          <option value="bekasi">bekasi</option>
        </select>
        <select name="tgl">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <select name="bln">
          <option value="Januari">Januari</option>
          <option value="Februari">Februari</option>
          <option value="maret">maret</option>
          <option value="April">April</option>
          <option value="Mei">Mei</option>
          <option value="Juni">Juni</option>
          <option value="Juli">Juli</option>
          <option value="Agustus">Agustus</option>
          <option value="September">September</option>
          <option value="Oktober">Oktober</option>
          <option value="November">November</option>
          <option value="Desember">Desember</option>
        </select>
        <select name="taun">
        <option value="1982">1982</option>
        <option value="1983">1983</option>
        <option value="1984">1984</option>
          <option value="1985">1985</option>
          <option value="1986">1986</option>
          <option value="1987">1987</option>
          <option value="1989">1989</option>
          <option value="1990">1990</option>
          <option value="1991">1991</option>
          <option value="1992">1992</option>
          <option value="1993">1993</option>
          <option value="1994">1994</option>
          <option value="1995">1995</option>
          <option value="1996">1996</option>
          <option value="1997">1997</option>
          <option value="1998">1998</option>
          <option value="1999">1999</option>
          <option value="2000">2000</option>
        </select><br/>
    Usia                :<br/>
                        <select name="usia">
          <option value="1-10">1-10</option>
          <option value="11-20">11-20</option>
          <option value="21-30">21-30</option>
          <option value="31-40">31-40</option>
          <option value="41-50">41-50</option>
          <option value="51-">51-</option>
        </select><br/>
    Agama                :<br/>
                        <select name="Agama" size="5">
          <option value="        Islam        ">Islam</option>
          <option value="        Kristen        ">Kristen</option>
          <option value="        Protestan        ">Protestan</option>
          <option value="        Islam KTP        ">Islam KTP</option>
          <option value="        Budha        ">Budha</option>
          <option value="        Katolik        ">Katolik</option>
          <option value="        Ortodox        ">Ortodox</option>
        </select><br/>
    Kota Asal            :<br/>
                        <select name="kota asal">
          <option value="surabaya">surabaya</option>
          <option value="sidoarjo">sidoarjo</option>
          <option value="semarang">Semarang</option>
          <option value="jakarta">Jakarta</option>
          <option value="bandung">bandung</option>
          <option value="bogor">bogor</option>
          <option value="denpasar">denpasar</option>
          <option value="mojokerto">mojokerto</option>
          <option value="bekasi">bekasi</option>
        </select><br/>
      
      
    Hobi                :<br/>
                        <input type="checkbox" name="hobi[]"
value="Balap liar" />
          Balap liar<br/>
          <input type="checkbox" name="hobi[]"
value="Memancing emosi" />
          Memancing emosi<br />
          <input type="checkbox" name="hobi[]"
value="Membaca pikiran" />
          Membaca pikiran<br />
          <input type="checkbox" name="hobi[]"
value="Travelling jungle" />
          Travelling jungle<br />
          <input type="checkbox" name="hobi[]"
value="Mesum" />
          Mesum<br/>
          <input type="checkbox" name="hobi[]"
value="Makan" />
          Makan<br/>
          <input type="checkbox" name="hobi[]"
value="Shopping" />
          Shopping<br/>
          <input type="checkbox" name="hobi[]"
value="Hidup" />
          Hidup<br/>
          <input type="checkbox" name="hobi[]"
value="Tiduuurrr" />
          Tiduuurrr<br/>
          <input type="checkbox" name="hobi[]"
value="Habisin Uang" />
          Habisin Uang<br/>
          <input type="checkbox" name="hobi[]"
value="Pacaran" />
          Pacaran<br/>
    Komentar Tentang Anda<br/>
    <textarea name="descript" cols="35" rows="10"></textarea><br/>
    <input type="submit" name="btnsubmit" value="    Send    "/><br/>
    <input type="reset" name="reset" value="    Delete        " /><br/>
    </p>
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</body>
</html>

dan hasilnya akan seperti ini. Jika kalian tidak ingin repot-repot nulis, aku kasi langsung filenya. Silahkan klik Disini sobat

Silahkan Mengisi Biodata Anda

Nama
Nama Lengkap
Alamat
TTL
Usia
Jenis kelamin	Pria Wanita
Hobby	Balap liar Memancing emosi Membaca pikiran Travelling jungle Mesum Makan Shopping Hidup Tiduuurrr Habisin Uang Pacaran
Agama	Islam Kristen Protestan Islam KTP Budha Katolik Ortodox
kota asal	surabaya sidoarjo Semarang Jakarta bandung bogor denpasar mojokerto bekasi
Masukan Anda

Kode yang saya beri warna merah itu adalah script PHP untuk menjalankan hasil dari inputan form kita. Sekarang kita buat script PHPnya.Langkahnya kurang lebih seperti ini :

1. Buka notepad atau dreamweaver kalian, Copy kode dibawah ini dinotepad / dreamweaver kalian. Simpan dengan nama aie.php. Jangan lupa save as type harus all file !!!

Kode PHPnya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>afinzdi</title>
<style type="text/css">
<!--
body,td,th {
    margin-top: 100px;
    margin-right: 80px;
    margin-bottom: 100px;
    margin-left: 240px;
    font-family: "Blackadder ITC";
    font-size:24px;
}
-->
</style></head>

<body>
<?php
    if (isset($_POST[ "btnsubmit"] )) {
    $nama = $_POST[ "nama" ] ;
    $alamat = $_POST[ "alamat" ] ;
    $gender = $_REQUEST[ "gender"] ;
    $tmp = $_POST[ "tmp"] ;
    $tgl = $_POST[ "tgl"];
    $bln = $_POST[ "bln"];
    $taun = $_POST[ "taun"];
    $usia = $_POST[ "usia"] ;
    $hobi = $_POST[ "hobi"] ;
    $Agama = $_POST[ "Agama"] ;
    $kota_asal = $_POST[ "kota_asal"] ;
    $descript = $_POST[ "descript"] ;
    $nick = $_POST[ "nick"] ;
    if (isset($nama) && isset($alamat)) {
        echo "<h4><blink style>Hai $nama :)  !!!!!</blink></h4><br/>";
        echo "<p><strong> Biodata Anda :</strong></p>";
        echo "<p>Nama                : $nama</p>";
        echo "<p>Nama Lengkap        : $nick </p>";
        echo "<p>Alamat                : $alamat</p>";
        echo "<p>Jenis Kelamin        : ";
    if ($gender == "P") {
        echo "Pria";
    } else {
        echo "Wanita</p>";
    }
        echo "<p>Agama                         : $Agama </p>";
        echo "<p>kota asal                     : $kota_asal </p>" ;
        echo "<p>TTL                 : $tmp, $tgl-$bln-$taun</p>";
        echo "<p>Usia                 : $usia </p>";
        echo "<p>Hobby                 :</p>";
foreach ($hobi as $nilai) {
echo "<p>&clubs; $nilai </p>";}

echo "<p>Komentar Tentang Anda : $descript </p></td></tr></table>" ;
echo "<p><strong> Terima Kasih telah mengisi Biodata Anda $nama !!! :)</strong></p>" ;
echo "<p>&nbsp;</p>";
echo "<p>&nbsp;</p>";
echo "<p>&nbsp;</p>";

        }}

?>
</body>
</html>

Untuk yang ini aku juga sediain filenya kug, jadi yang mau download silahkan klik Disini sobat.
Nah sekarang kita tinggal menjalankannya. Untuk menjalankan, instal dulu xampp kalian terlebih dahulu. Jika sudah,

1.Copy file narumi.html dan aie.php dan masukkan dalam folder form dalam folder htdocs. Default folder C:\xampp\htdocs\form

2. Buka xampp control panel dan aktifkan Apache dan MySQLnya. Klik start untuk mengaktifkan

4. Buka browser kalian, lalu ketikkan localhost/form di address bar. Tak perlu konek internet kok...

Pilih narumi.html. Kemudian isi semua data-datanya. Jika sudah kalian klik send. Maka otomatis data yang telah kalian inputkan akan ditampilkan padakode PHPnya.
Nah bagaimana, selanjutnya kalian sendiri yang berkreasi untuk memberi warna atau apalah gitu supaya lebih bagus. Hehehehe

Semoga artikel tsb bermanfaat untuk kalian. Yoroshiku !!! ^^

Share :

Tweet

More

Related Post