Form(Tugas 6 PWEB)

Form menggunakan HTML, CSS, dan Javascript

Nama : Ersad Ahmad Ishlahuddin
NRP   : 05111740000016
Kelas  : PWEB C

Penerapan dasar dari javascript yang dituangkan ke dalam bentuk Form pendaftaran pada website berita yang saya buat sebelumnya.

Link Website : LINK
Untuk melakukan pendaftaran tinggal mengklik tombol Daftar di pojok kanan atas Website
Kemudian mengisi kolom yang kosong sesuai perintah 
 
Source Code
HTML

<!DOCTYPE html>
<html>
<head>
 <title>Daftar | menit.com</title>
 <link rel="stylesheet" type="text/css" href="form_sty.css">
</head>
<body>
 <center><h3 style="font-size: 30px">Daftar</h3></center>
 <div class="login">
  <form action="#" method="POST" onSubmit="validasi()">
   <div>
    <label>Nama Lengkap:</label>
    <input type="text" name="nama" id="nama" />
   </div>
   <div>
    <label>Alamat:</label>
    <textarea cols="30" rows="5" name="alamat" id="alamat"></textarea>
   </div>
   <div>
    <label>Email:</label>
    <input type="email" name="email" id="email" placeholder="example@example.com" />
   </div>
   <div>
             <label for="pass1">Kata Sandi:</label>
             <input name="pass1" id="pass1" type="password">
         </div>
         <div>
             <label for="pass2">Ulangi Kata Sandi:</label>
             <input name="pass2" id="pass2" onkeyup="cekPass(); return false;" type="password">
             <span id="konfirm" class="konfirm"></span>
         </div>
   <div>
    <label>Nomor HP:</label>
    <input type="char" name="hp" id="hp" placeholder="10-13 digit" />
   </div>
   <div>
    <label>Jenis Kelamin:</label>
    <div class="gender">
     Pria   <input type="radio" name="gender" id="gender" value="Pria">
     Wanita <input type="radio" name="gender" id="gender" value="Wanita"> 
    </div>
   </div>
   <div>
    <label>Tanggal Lahir:</label><p/>
    <select name="tgl" style="width: 20%">
     <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>
    <select name="bulan" style="width: 45%">
     <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="tahun" style="width: 30%">
     <option value = '2018'> 2018 </option>
     <option value = '2017'> 2017 </option>
     <option value = '2016'> 2016 </option>
     <option value = '2015'> 2015 </option>
     <option value = '2014'> 2014 </option>
     <option value = '2013'> 2013 </option>
     <option value = '2012'> 2012 </option>
     <option value = '2011'> 2011 </option>
     <option value = '2010'> 2010 </option>
     <option value = '2009'> 2009 </option>
     <option value = '2008'> 2008 </option>
     <option value = '2007'> 2007 </option>
     <option value = '2006'> 2006 </option>
     <option value = '2005'> 2005 </option>
     <option value = '2004'> 2004 </option>
     <option value = '2003'> 2003 </option>
     <option value = '2002'> 2002 </option>
     <option value = '2001'> 2001 </option>
     <option value = '2000'> 2000 </option>
     <option value = '1999'> 1999 </option>
     <option value = '1998'> 1998 </option>
     <option value = '1997'> 1997 </option>
     <option value = '1996'> 1996 </option>
     <option value = '1995'> 1995 </option>
     <option value = '1994'> 1994 </option>
     <option value = '1993'> 1993 </option>
     <option value = '1992'> 1992 </option>
     <option value = '1991'> 1991 </option>
     <option value = '1990'> 1990 </option>
     <option value = '1989'> 1989 </option>
     <option value = '1988'> 1988 </option>
     <option value = '1987'> 1987 </option>
     <option value = '1986'> 1986 </option>
     <option value = '1985'> 1985 </option>
     <option value = '1984'> 1984 </option>
     <option value = '1983'> 1983 </option>
     <option value = '1982'> 1982 </option>
     <option value = '1981'> 1981 </option>
     <option value = '1980'> 1980 </option>
     <option value = '1979'> 1979 </option>
     <option value = '1978'> 1978 </option>
     <option value = '1977'> 1977 </option>
     <option value = '1976'> 1976 </option>
     <option value = '1975'> 1975 </option>
     <option value = '1974'> 1974 </option>
     <option value = '1973'> 1973 </option>
     <option value = '1972'> 1972 </option>
     <option value = '1971'> 1971 </option>
     <option value = '1970'> 1970 </option>
     <option value = '1969'> 1969 </option>
     <option value = '1968'> 1968 </option>
     <option value = '1967'> 1967 </option>
     <option value = '1966'> 1966 </option>
     <option value = '1965'> 1965 </option>
     <option value = '1964'> 1964 </option>
     <option value = '1963'> 1963 </option>
     <option value = '1962'> 1962 </option>
     <option value = '1961'> 1961 </option>
     <option value = '1960'> 1960 </option>
    </select>   
   </div>
   <div>
    <label>Rubrik Favorit?:</label>
    <select name="rubrik">
     <option name="rubrik">Game</option>
     <option name="rubrik">Anime & Manga</option>
     <option name="rubrik">TV & Film</option>
     <option name="rubrik">Geek</option>
    </select>
   </div>
   <div>
    <input type="submit" value="Daftar" class="tombol">
    <a href="index.html" class="back">Batal</a>
   </div>
  </form>
 </div>
 <div class="footer">
  <div class="jarak">
   <p><center>Copyright 2018 menit.com. All Rights Reserved</center></p>
  </div>
 </div>
</body>
<script type="text/javascript">
 function cekPass()
 {
     var pass1 = document.getElementById('pass1');
     var pass2 = document.getElementById('pass2');
     var message = document.getElementById('konfirm');
     var goodColor = "#66cc66";
     var badColor = "#ff6666";
     if(pass1.value == pass2.value){
         pass2.style.backgroundColor = goodColor;
         message.style.color = goodColor;
     }else{
         pass2.style.backgroundColor = badColor;
         message.style.color = badColor;
     }
 }  
 function validasi() 
 {
  var nama = document.getElementById("nama").value;
  var email = document.getElementById("email").value;
  var alamat = document.getElementById("alamat").value;
  var suka = document.getElementById("suka").value;
  var hp = document.getElementById("hp").value;
  var password1 = document.getElementById("pass1").value;
  var password2 = document.getElementById("pass2").value;
  if (nama != "" && email!="" && alamat !="" && hp !=""&& suka !=""&& password1 !="" && password2 !="" && nomor.length <=13 && nomor.length >=10) {
   return true;
  }else{
   alert('Anda harus mengisi data dengan lengkap !');
  }
 }
</script>
</html>

CSS

body {
  background: #836446;
  font-family: sans-serif;
}

h2 {
  color: #fff;
  text-decoration: none;
}

h3 {
  color: #fff;
  line-height: 10px;
  text-decoration: none;
}

h4 {
  color: #595959;
  font-size: 10px;
}

.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"],
input[type="char"],
input[type="select"],
input[type="password"],

textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
  border-radius: 3px;
}

select{
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  transition-duration: 0.4s;
  background: #836446;
  color: #fff;
  font-size: 14px;
  border: 0;
  padding: 5px 8px;
  border-radius: 3px;
}

.tombol:hover {
  background-color: #e3dac9;
  color: #fff;
}

.back {
  color: #595959;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 8px;
}

.jarak {
    padding: 0 2pc;
}

.gender{
  padding: 8px;
  font-size: 10pt;
}

.footer {
    width: 90%;
    margin: auto;
    height:41px;
    line-height: 40px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
}

Screenshot