TUGAS PWEB C

Membuat form validasi.

Pada jurnal kali ini, saya ingin menyampaikan sedikit mengenai form yang terdapat pada web saya.
Hyperlink tidak bekerja? manual ke berita.enlightarts.com.

Cara kerjanya adalah dengan menggunakan script, email akan diperiksa apakah valid/tidak, dan otomatis akan mengecek data username yang pernah diinput pada browser. Hal ini bertujuan untuk memudahkan input yang berulang.

Tampilan :

HTML FORM:

      <div class="login">  
           <form action="#" method="POST" onSubmit="validasi()">  
                <div>  
                     <label>Nama Lengkap:</label>  
                     <input type="text" name="nama" id="nama" />  
                </div>  
                <div>  
                     <label>Tanggal Lahir:</label>  
                     <input type="text" name="nama" id="nama" />  
                </div>  
                <div>  
                     <label>Nomor HP:</label>  
                     <input type="text" name="nama" id="nama" />  
                </div>  
                <div>  
                     <label>Email:</label>  
                     <input type="email" name="email" id="email" />  
                </div>  
                <div>  
                     <label>Alamat:</label>  
                     <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>  
                </div>  
                <div>  
                     <label>Topik Yang Disukai:</label>  
                     <input type="text" name="nama" id="nama" />  
                </div>  
                <div>  
                     <input type="submit" value="Daftar" class="tombol">  
                </div>  
           </form>  
      </div>  

SCRIPT FORM :

 <script type="text/javascript">  
      function validasi() {  
           var nama = document.getElementById("nama").value;  
           var email = document.getElementById("email").value;  
           var alamat = document.getElementById("alamat").value;  
           if (nama != "" && email!="" && alamat !="") {  
                return true;  
           }else{  
                alert('Anda harus mengisi data dengan lengkap !');  
           }  
      }  
 </script>  

CSS FORM :

 .login {  
  padding: 1em;  
  margin: 2em auto;  
  width: 17em;  
  background: #fff;  
  border-radius: 3px;  
 }  
 label {  
  font-size: 10pt;  
  color: #555;  
 }  
 input[type="text"],  
 input[type="email"],  
 textarea {  
  padding: 8px;  
  width: 95%;  
  background: #efefef;  
  border: 0;  
  font-size: 10pt;  
  margin: 6px 0px;  
 }  
 .tombol {  
  background: #3498db;  
  color: #fff;  
  border: 0;  
  padding: 5px 8px;  
 }