Tugas Form Registrasi

Pada tugas kami ini kami harus membuat sebuah form registrasi menggunakan javascript.

Berikut code saya.

 HTML & JavaScript : 

<!DOCTYPE html>
<html>
<head>
    <title>Form Registrasi</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <center><h2>Registrasi</h2></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>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>Nomor Handphone:</label>
                <input type="text" name="handphone" id="handphone" />
            </div>
            <div>
                <label>Jenis Kelamin:</label>
                <input type="radio" name="gender" id="laki-laki">Laki-laki    
                <input type="radio" name="gender" id="perempuan">Perempuan<br>
            </div>
            <div>
                <label>Tanggal Lahir:</label>
                <input type="date" name="birthdate" id="birthdate" />
            </div>
           
 
        </form>
    </div>
</body>
<script type="text/javascript">
    function validasi() {
        var nama = document.getElementById("nama").value;
        var email = document.getElementById("email").value;
        var alamat = document.getElementById("alamat").value;
        var handphone = document.getElementById("handphone").value;
        var birthdate = document.getElementById("birthdate").value;
 
        if (nama != "" && email!="" && alamat !="" && handphone !="" && birthdate !="" ) {
            return true;
        } else{
            alert('Anda harus mengisi data dengan lengkap !');
        }
    }
</script>
</html>
CSS: 

body {
  background-color:#b3b3b3;
  font-family: sans-serif;
}
 
h2 {
  color: #334d00;
}
 
.login {
  padding: 5em;
  margin: 2em auto;
  width: 30em;
  height: 25em;
  background: #fff;
  border-radius: 30px;
}
 
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;
}
 
input[type="radio"] {
  font-size: 10pt;
  color: #555;
}
.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}

Komentar

Posting Komentar

Postingan Populer