Jumat, 11 Mei 2012

Contoh Form HTML

Langkah pertama buat form inputannya menggunakan dreamweaver . buka saja dreamweaver kalian, lalu buat desain seperti ini 


setelah didesain ketikan perintah berikut :
  •  pada  bagian <body> 
 <form id="form1" name="form1" method="POST" action="p4.php">
  • nama dan nim
 <input name="nama" type="text" id="nama" size="50" maxlength="50" />
 <input name="nim" type="text" id="nim" size="50" maxlength="50" />
  •  alamat dan no telepon
<input name="alamat" type="text" id="alamat" size="50" maxlength="50" />
<input name="notel" type="text" id="notel" size="50" maxlength="50" />
  • jurusan dan angkatan
  <select name="jurusan" id="jurusan " >
 <select name="angkatan" id="angkatan">

jika selesai kalian dapat menyimpannya dengan nama p3.php
script lengkap dari form inputan sebagai berikut :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DATA MAHASISWA STIMED NUSA PALAPA</title>
<style type="text/css">
<!--
.style1 {
color: #666666;
font-weight: bold;
}
.style4 {color: #666666}
-->
</style>
</head>

<body>

<form id="form1" name="form1" method="POST" action="p4.php">
  <table width="527" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCFFFF" bgcolor="#FFCCFF">
    <tr>
      <td height="19" colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td height="32" colspan="4"><div align="center" class="style1">DATA MAHASISWA STIMED NUSA PALAPA </div></td>
    </tr>
    <tr>
      <td width="8" bordercolor="#FFCCFF">&nbsp;</td>
      <td width="170" bordercolor="#FFCCFF">&nbsp;</td>
      <td width="20" bordercolor="#FFCCFF">&nbsp;</td>
      <td width="329" bordercolor="#FFCCFF">&nbsp;</td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style4"> Nama</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><label>
        <input name="nama" type="text" id="nama" size="50" maxlength="50" />
      </label></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style4">Nim</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><label>
        <input name="nim" type="text" id="nim" size="50" maxlength="50" />
      </label></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style4">Alamat</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><label>
        <input name="alamat" type="text" id="alamat" size="50" maxlength="50" />
      </label></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style4">No.Telpon</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><label>
        <input name="notel" type="text" id="notel" size="50" maxlength="50" />
      </label></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style4">Jurusan</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><label>
        <select name="jurusan" id="jurusan " >
          <option selected>SI</option>
          <option>TI</option>
        </select>
      </label></td>
    </tr>
    
    <tr>
      <td bordercolor="#FFCCFF">&nbsp;</td>
      <td bordercolor="#FFCCFF"><span class="style4">Angkatan</span></td>
      <td bordercolor="#FFCCFF">:</td>
      <td bordercolor="#FFCCFF"><label>
        <select name="angkatan" id="angkatan">
          <option>2009</option>
          <option>2010</option>
          <option>2011</option>
        </select>
      </label></td>
    </tr>
    
    <tr>
      <td bordercolor="#FFCCFF">&nbsp;</td>
      <td bordercolor="#FFCCFF"><span class="style4"></span></td>
      <td bordercolor="#FFCCFF"><p>&nbsp;</p>
      <p>&nbsp;</p></td>
      <td bordercolor="#FFCCFF"><label>
        <input name="proses" type="submit" id="proses" value="SUBMIT" />
        <input type="reset" name="Reset" value="RESET">
      </label></td>
    </tr>
  </table>

</form>

</body>
</html>

langkah berikutnya yaitu membuat form untuk memproses data/ inputan dari user, buat lagi desain form seperti dibawah ini 



ketik perintah berikut :
  • body
<?php
  $nama=$_POST['nama'];
  $nim=$_POST['nim'];
  $alamat=$_POST['alamat'];
  $notel=$_POST['notel'];
  $jurusan = $_POST['jurusan'];
  $angkatan=$_POST['angkatan'];
  if ($jurusan=="SI")
   { $nmjur="sistem informasi";
   }
  else
   {
     $nmjur="teknik informatika";
   }
  ?>
<form id="form1" name="form1" method="post" action="">
  • tampilkan semua inputan yang telah dimasukkan user
<?php echo $nama;?>
<?php echo $nim;?>
<?php echo $alamat;?>
<?php echo $notel;?>
<?php echo $nmjur; ?>
<?php echo $angkatan; ?>



simpan dengan nama p4.php, berikut scrip lengkapnya :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DATA MAHASISWA STIMED NUSA PALAPA</title>
<style type="text/css">
<!--
.style1 {
color: #660099;
font-weight: bold;
}
.style3 {color: #660099; }
-->
</style>
</head>

<body>
  <?php
  $nama=$_POST['nama'];
  $nim=$_POST['nim'];
  $alamat=$_POST['alamat'];
  $notel=$_POST['notel'];
  $jurusan = $_POST['jurusan'];
  $angkatan=$_POST['angkatan'];
  if ($jurusan=="SI")
   { $nmjur="sistem informasi";
   }
  else
   {
     $nmjur="teknik informatika";
   }
  ?>
  
<form id="form1" name="form1" method="post" action="">
  <table width="523" border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="#FFCCFF" bgcolor="#FFCCFF">
    
    <tr>
      <td height="46" colspan="4"><div align="center"><span class="style1">DATA MAHASISWA STIMED NUSA PALAPA </span></div></td>
    </tr>
    
    <tr>
      <td width="16" valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td width="212" valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">Nama</div></td>
      <td width="17" valign="top" bordercolor="#FFCCFF"><div align="left" class="style3">:</div></td>
      <td width="260" valign="top" bordercolor="#FFCCFF"><span class="style3">
        <label>
        </span>
        <div align="justify" class="style3"><?php echo $nama; ?></div>
        <span class="style3">
        </label>
      </span></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">Nim</div></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left" class="style3">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style3">
        <label>
        </span>
        <div align="justify" class="style3"><?php echo $nim; ?></div>
        <span class="style3">
        </label>
      </span></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">Alamat</div></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left" class="style3">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style3">
        <label>
        </span>
        <div align="justify" class="style3"><?php echo $alamat; ?></div>
        <span class="style3">
        </label>
      </span></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">No.Telpon</div></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left" class="style3">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style3">
        <label>
        </span>
        <div align="justify" class="style3"><?php echo $notel; ?></div>
        <span class="style3">
        </label>
      </span></td>
    </tr>
    <tr>
      <td valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td height="26" valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">Jurusan</div></td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style3">:</span></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3"><?php echo $nmjur; ?></div></td>
    </tr>
    <tr>
      <td height="57" valign="top" bordercolor="#FFCCFF">&nbsp;</td>
      <td valign="top" bordercolor="#FFCCFF"><div align="justify" class="style3">Angkatan</div></td>
      <td valign="top" bordercolor="#FFCCFF"><div align="left" class="style3">:</div></td>
      <td valign="top" bordercolor="#FFCCFF"><span class="style3">
        <label>
        </span>
        <div align="justify" class="style3"><?php echo $angkatan; ?></div>
        <span class="style3">
        </label>
      </span></td>
    </tr>
  </table>

</form>

</body>

</html>

save dengan nama p4.php

tampilan hasil program 







Tidak ada komentar:

Posting Komentar