1. HTML
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Pembaca Berita Website dengan Javascript</title>
<link rel="stylesheet" type="text/css" href="weew.css">
</head>
<body>
<center><h2>REGISTRASI PEMBACA BERITA WEBSITE</h2></center>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama :</label>
<input type="text" name="nama" id="nama" />
</div>
<div>
<label>Email :</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>No HP :</label>
<input type="integer" name="no_hp" id="no_hp" />
</div>
<div>
<label>Jenis Kelamin :</label>
<input type="text" name="jk" id="jk" />
</div>
<div>
<label>Tanggal Lahir :</label>
<input type="integer" name="tgl_lahir" id="tgl_lahir" />
</div>
<div>
<label>Alamat :</label>
<textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>
</div>
<div>
<label>Kolom Rubik :</label>
<input type="text" name="rubik" id="rubik" />
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</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 no_hp = document.getElementById("no_hp").value;
var jk = document.getElementById("jk").value;
var tgl_lahir = document.getElementById("tgl_lahir").value;
var rubik = document.getElementById("rubik").value;
if (nama != "" && email!="" && alamat !="" && no_hp != "" && jk != "" && tgl_lahir != "" && rubik != "") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
</script>
</html>
2. CSS
body {
background: #3498db;
font-family: sans-serif;
}
h2 {
color: #fff;
}
.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="integer"],
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;
}
jadi jika form tersebut tidak diisi dengan lengkap maka akan muncul tulisan seperti ini
Tidak ada komentar:
Posting Komentar