menunavigasihorisontal

Blognya Muhamad Ischaq

Blognya Muhamad Ischaq

Translate

Jumat, 21 Oktober 2016

Login HTML + Javascript

Assalamu 'alaikum wr. wb.

Tugas 01 Pemrograman World Wide Web

Tugas Membuat Form email dan password, tombol masuk dan batal dengan disertai javascript

Skrip HTML + Javascipt
<html>
<head>
              <title>Tugas 01 Javascript</title>
<style></style>
<script type="text/javascript">
function valregister(){
         
            var x=register.txtemail.value;
            if(x==""){
                        alert("Alamat Email masih kosong");
                        register.txtemail.focus();
                        return false;
            }else{
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                        alert("Alamat Email Tidak Valid");
                        register.txtemail.focus();
                        return false;
            }
            }
            var z=register.txtpassword.value;
            var panjang=z.length;
            if(register.txtpassword.value==""){
                        alert("Sandi masih kosong");
                        register.txtpassword.focus();
                        return false;
            }
            if(panjang<5){
                        alert("Sandi minimum 5 karakter");
                        register.txtpassword.focus();
                        return false;
            }
         
            alert("Berhasil Masuk");
             return true;
}
</script>
</head>
<body>
<h1>Masuk Email</h1>
Nama : M. Ischaq Maulana<br/><p>
Tugas 01 : Form Login + Javascript</p>
<form name="register" action="" method="post" enctype="multipart/form-data" onSubmit="return valregister()">
  <br />
  <table align="left" width="200" border="0">
  <tr>
    <td height="32">Email</td>
    <td><input type="text" name="txtemail" id="txtemail" size="20" maxlength="50"></td>
  </tr>
  <tr>
    <td height="32">Sandi</td>
    <td><label>
      <input name="txtpassword" type="password" id="txtpassword">
    </label></td>
  </tr>
  <tr>
  <td></td>
    <td ><input  name="mlebu" type="submit" id="mlebu" value="Masuk" onsubmit="valregister()" /></td>
  </tr>
  <tr>
  <td></td>
  <td ><input name="wurung" type="reset" id="wurung" value="Batal" /></td>
  </tr>
</table>
</form>
</body>
</html>

Tampilan Web Browser
Ketika user salah memasukkan format email pada form Email kemudian melakukan login dengan meng-klik tombol Masuk, maka akan muncul pemberitahuan bahwa Alamat Email Tidak Valid. seperti pada Gambar 01.
Gambar 01

Ketika user memasukkan password kurang dari lima kemudian melakukan login dengan meng-klik tombol Masuk, maka akan muncul pemberitahuan bahwa Sandi Minimal 5 Karakter. Seperti terlihat pada Gambar 02.
Gambar 02

Ketika user telah menulis email dengan benar dan memasukkan password minimal 5 karakter, kemudian neng-klik tombol Masuk, maka akan ada pemberitahuan bahwa Berhasil Masuk. Seperti terlihat pada Gambar 03.
gambar 03

Dan ketika user meng-klik tombol Batal, maka akan mereset form yang telah di isi sebelumnya.

Sekian dulu
Wassalamu 'alaikum wr. wb.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)