Html coding

Document Sample
Html coding Powered By Docstoc
					<html>
<head>
<title>FORM BIODATA</title><!--title-->
<script type="text/javascript">
// cek validasi alfabet
function validasi_alfabet(field, alerttxt){
      var alfaExp = /^[a-zA-Z\s]+$/;

     with (field) {
           if(field.value.match(alfaExp)) {
                 return true;
           } else {
                 alert(alerttxt);
                 return false;
           }
     }
}
// cek validasi email
function validasi_email(field, alerttxt) {
      with (field) {
            apos = value.indexOf("@");
            dotpos = value.lastIndexOf(".");
            if (apos < 1 || dotpos-apos < 2) {
                  alert(alerttxt);
                  return false;
            } else {
                  return true;
            }
      }
}
// cek validasi numeric
function validasi_numeric(field, alerttxt) {
      var numericExp = /^[0-9\.\-]+$/;

     with (field) {
           if (field.value.match(numericExp)) {
                 return true;
           } else {
                 alert(alerttxt);
                 return false;
           }
     }
}
// cek validasi alfabet numeric
function validasi_alfanumeric(field, alerttxt){
      var alfanumExp = /^[0-9a-zA-Z\.\-]+$/;

     with (field) {
           if(field.value.match(alfanumExp)){
                 return true;
           } else {
                 alert(alerttxt);
                 return false;
           }
      }
}
// cek validasi panjang character
function validasi_lenght(field, min, max){
      var uInput = field.value;

      with (field) {
            if(uInput.length >= min && uInput.length <= max){
                  return true;
            } else {
                  alert("Input-an Harus "+ min +" Digit Atau Lebih, Dan
Kurang Dari "+ max + " Digit");
                  return false;
            }
      }
}
/*
// cek validasi radio button
function validasi_radio(field){
      var valid = false;

     with (field) {
           for (var i = 0; i < field.length; i++) {
                 if (field[i].checked) {
                       return true;
                 }
           }
           alert("Make a choice from the radio buttons.");
           return false;
     }
}
*/
/*
// cek validasi radio button
function validasi_combb(field){
      var selectedCombobox =(akun.field.value);

     with (field) {
       if (selectedCombobox == "-1") {
         alert("Please Select Technology");
         return false;
       }
       return true;
     }
}
*/
// cek validasi form
function validasi(thisForm) {
      var password = document.getElementById('password'),
            repassword = document.getElementById('repassword');

      if (validasi_alfabet(nama,"Nama tidak valid") == false ||
validasi_lenght(nama, 2, 50) == false) {
            nama.focus();
            return false;
      } else if (validasi_numeric(nim,"NIM tidak valid") == false) {
            nim.focus();
            return false;
      } else if (validasi_alfanumeric(kelas,"Kelas tidak valid") ==
false) {
            kelas.focus();
            return false;
      } else if (validasi_email(email,"Alamat email tidak valid") ==
false) {
            email.focus();
            return false;
      } else if (validasi_numeric(telepon,"Telepon tidak valid") ==
false) {
            telepon.focus();
            return false;
      } /*else if (validasi_radio(jns_kelamin)) {
            return false;
      } else if (validasi_combb(tgl_lahir) == true) {
      } else if (validasi_combb(bln_lahir) == true) {
      } else if (validasi_combb(thn_lahir) == true) {
      }*/ else if (validasi_alfanumeric(username,"Username tidak valid")
== false || validasi_lenght(username, 6, 20) == false) {
            username.focus();
            return false;
      } else if (validasi_alfanumeric(password,"Password tidak valid") ==
false || validasi_lenght(password, 6, 20) == false) {
            password.focus();
            return false;
      } else if (validasi_alfanumeric(repassword,"Retype Password tidak
valid") == false || validasi_lenght(repassword, 6, 20) == false) {
            repassword.focus();
            return false;
      } else if(password.value != repassword.value) {
            alert("Isi Password Dengan Retype Password Harus Sama");
      } else {
            alert("Pengisian Form Berjalan Lancar");
            var Output = window.open("", "", "status=0, menubar=0,
height=400, width=400");
            Output.document.open();
            Output.document.write("<h2>Biodata</h2>");
            Output.document.write("<table>");
            Output.document.write("<tr><td><a>Nama
Lengkap</a></td><td>:</td><td><a>" + nama.value +"</a></td></tr>");

      Output.document.write("<tr><td><a>NIM</a></td><td>:</td><td><a>" +
nim.value +"</a></td></tr>");

      Output.document.write("<tr><td><a>Kelas</a></td><td>:</td><td><a>"
+ kelas.value +"</a></td></tr>");

      Output.document.write("<tr><td><a>Alamat</a></td><td>:</td><td><a>"
+ alamat.value +"</a></td></tr>");
      Output.document.write("<tr><td><a>Email</a></td><td>:</td><td><a
href="+"mailto:" + email.value +">" + email.value +"</a></td></tr>");
            Output.document.write("<tr><td><a>Telp/Cell
Phone</a></td><td>:</td><td><a>" + telepon.value +"</a></td></tr>");
            Output.document.write("</table>");
            Output.document.write("<h2>Login Data</h2>");
            Output.document.write("<table>");

      Output.document.write("<tr><td><a>Username</a></td><td>:</td><td><a
>" + username.value +"</a></td></tr>");

      Output.document.write("<tr><td><a>Password</a></td><td>:</td><td><a
>" + password.value +"</a></td></tr>");
            Output.document.write("</table>");
            Output.document.close();
      }
}
</script>
</head>
<body>
<form method="get" name="akun"><!--Head Form Akun-->
      <h2 align="center">Isi Biodata Pribadi</h2>
      <table border="0" align="center"><!--Table Biodata-->
            <tr><!--Coloumn Nama Lengkap-->
                  <td width="130">
                        <a>Nama Lengkap*</a>
                  </td>

                 <td>:</td>

                 <td><!--Form Nama Lengkap-->
                       <input type="text" name="nama" size="30"
maxlength="50" id="nama"/><p />
                 </td>
           </tr><!--End Coloumn Nama Lengkap-->

           <tr><!--Coloumn NIM-->
                 <td width="130">
                       <a>NIM*</a><em>(10 digit)</em>
                 </td>

                 <td>:</td>

                 <td><!--Form NIM-->
                       <input type="text" name="nim" size="30"
maxlength="10" id="nim"/><p />
                 </td>
           </tr><!--End Coloumn NIM-->

           <tr><!--Coloumn Kelas-->
                 <td width="130">
                       <a>Kelas*</a><em>(8 digit)</em>
                 </td>
                  <td>:</td>

                 <td><!--Form Kelas-->
                       <input type="text" name="kelas" size="30"
maxlength="8" id="kelas"/><p />
                 </td>
           </tr><!--End Coloumn Kelas-->

             <tr><!--Coloumn Jenis Kelamin-->
                   <td width="130">
                         <a>Jenis Kelamin*</a>
                   </td>

                  <td>:</td>

                 <td><!--Form Jenis Kelamin-->
                       <input type="radio" name="jns_kelamin"
value="ma"><a>Pria</a></input><input type="radio" name="jns_kelamin"
value="fe">Wanita</input><p />
                 </td>
           </tr><!--End Coloumn Jenis Kelamin-->

             <tr><!--Coloumn Tanggal Lahir-->
                   <td width="130">
                         <a>Tanggal Lahir*</a>
                   </td>

                  <td>:</td>

                  <td><!--Form Tanggal Lahir-->
                        <select name="tgl_lahir" id="tgl_lahir"><!--Combo
Tanggal-->
                               <option   value="-1">[..]</option>
                               <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="23">23</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><!--End Combo Tanggal-->
                      <select name="bln_lahir" id="bln_lahir"><!--Combo
Bulan-->
                             <option value="-
1">[...................]</option>
                             <option value="1">Januari</option>
                             <option value="2">Februari</option>
                             <option value="3">Maret</option>
                             <option value="4">April</option>
                             <option value="5">Mei</option>
                             <option value="6">Juni</option>
                             <option value="7">Juli</option>
                             <option value="8">Agustus</option>
                             <option value="9">September</option>
                             <option value="10">Oktober</option>
                             <option value="11">November</option>
                             <option value="12">Desember</option>
                       </select><!--End Combo Tahun-->
                       <select name="thn_lahir" id="thn_lahir"><!--Combo
Tahun-->
                             <option value="-1">[..........]</option>
                             <option value="1">1991</option>
                             <option value="2">1992</option>
                             <option value="3">1993</option>
                             <option value="4">1994</option>
                             <option value="5">1995</option>
                             <option value="6">1996</option>
                             <option value="7">1997</option>
                             <option value="8">1998</option>
                             <option value="9">1999</option>
                             <option value="10">2000</option>
                             <option value="11">2001</option>
                             <option value="12">2002</option>
                             <option value="13">2003</option>
                             <option value="14">2004</option>
                             <option value="15">2005</option>
                             <option value="16">2006</option>
                             <option value="17">2007</option>
                             <option value="18">2008</option>
                             <option value="19">2009</option>
                             <option value="20">2010</option>
                             <option value="21">2011</option>
                       </select><!--End Combo Tahun-->
                 </td>
                       <p />
                 </td>
           </tr><!--End Coloumn Tanggal Lahir-->

           <tr><!--Coloumn Alamat-->
                 <td width="130">
                       <a>Alamat</a>
                 </td>

                 <td>:</td>

                 <td><!--Form Alamat-->
                       <textarea name="alamat" cols="23" rows="3"
id="alamat"></textarea>
                 </td>
           </tr><!--End Coloumn Alamat-->

           <tr><!--Coloumn Email-->
                 <td width="130">
                       <a>Email*</a>
                 </td>

                 <td>:</td>

                 <td><!--Form Email-->
                       <input name="email" type="text" size="30"
maxlength="50" id="email"/>
                 </td>
           </tr><!--End Coloumn Telepon-->

           <tr><!--Coloumn Telepon-->
                 <td width="130">
                       <a>Telp/Cell Phone*</a>
                 </td>

                 <td>:</td>

                  <td><!--Form Telepon-->
                        <input name="phone" type="text" size="30"
maxlength="12" id="telepon"/>
                  </td>
            </tr><!--End Coloumn Telepon-->
      </table><!--End Table-->

     <h2 align="center">Isi Login Detail</h2>
     <table border="0" align="center"><!--Table Login-->
           <tr><!--Coloumn Username-->
                 <td width="130">
                       <a>Username*</a>
                 </td>

                 <td>:</td>
                 <td><!--Form Username-->
                       <input type="text" name="username" size="30"
maxlength="30" id="username"/><p />
                 </td>
           </tr><!--End Coloumn Username-->

           <tr><!--Coloumn Password-->
                 <td width="130">
                       <a>Password*</a>
                 </td>

                 <td>:</td>

                 <td><!--Form Password-->
                       <input type="password" name="password"
id="password" size="30" maxlength="30"/><p />
                 </td>
           </tr><!--End Coloumn Password-->

           <tr><!--Coloumn Retype Password-->
                 <td width="130">
                       <a>Retype Password*</a>
                 </td>

                 <td>:</td>

                  <td><!--Form Retype Password-->
                        <input type="password" name="repassword"
id="repassword" size="30" maxlength="30"/><p />
                  </td>
            </tr><!--End Coloumn Retype Password-->
      </table><!--End Table-->
      <br/ >
      <table border="0" align="center"><!--Table Button-->
            <tr><!--Coloumn Submit-->
                  <td>&nbsp;&nbsp;</td>
                  <td>&nbsp;&nbsp;</td>
                  <td>&nbsp;&nbsp;</td>
                  <td>&nbsp;&nbsp;</td>
                  <td>&nbsp;&nbsp;</td>

                 <td width="130"><!--Form Submit-->
                       <input type="button" name="submit" id="submit"
value="Submit" onClick="return validasi(this);">
                 </td>

                 <td width="130"><!--Form Reset-->
                       <input type="reset" name="reset" id="reset"
value="Reset">
                  </td>
            </tr><!--End Coloumn Submit-->
      </table><!--End Table-->
</form><!--End Form Akun-->
</body>
</html>

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:43
posted:5/17/2011
language:Danish
pages:9