NRP : 05111740000195
Kelas : PWEB C
Souce codenya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Validasi dengan Javascript</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
body {
background-image:url(THUMBNAIL_BG_03.jpg);
background-size:cover}
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #7B68EE;
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: #000000;
color: #fff;
border: 0;
padding: 5px 8px;
}
</head>
</style>
<body>
<script type="text/javascript">
function validasi_input(form){
var mincar = 50;
var mincar1 = 10;
var mincar2 = 12;
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
pola_tanggal=/^d{1,2}\/\d{1,2}\/\d{4}$/;
if (form.nama.value.length > mincar && form.nama.value.length !=0){
alert("Panjang nama maksimal 50 Karater!");
form.nama.focus();
return (false);
}
else if (form.nama.value == ""){
alert("Name masih kosong!");
form.nama.focus();
return (false);
}
else if (!pola_email.test(form.email.value)){
alert ("Penulisan Email tidak benar");
form.email.focus();
return (false);
}
else if (form.nohp.value.length < mincar1 || form.nohp.value.length > mincar2){
alert("Panjang No.handphone Minimal 10 Karater dan Maksimal 12 Karater!");
form.nohp.focus();
return (false);
}
else if (!pola_tanggal.test(form.tgllahir.value)){
alert ("Penulisan Tanggal Lahir harus sesuai format dd/mm/yyyy");
form.tgllahir.focus();
return (false);
}
return (true);
}
</script>
<div class="login">
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<title>Membuat Form Validasi dengan Javascript </title>
<div>
<label>Nama: <input type="text" name="nama" id="nama" placeholder="Tuliskan nama anda" /></label>
</div>
<div>
<label>Alamat:</label>
<td>
<textarea class="alamat" type="textarea" name="Nama Jalan" id="textarea" placeholder="Nama Jalan" cols="35" rows="1"></textarea>
</td>
<tr>
<td>
</td>
<td>
<textarea class="alamat" type="textarea" name="No" id="textarea" placeholder="No" cols="35" rows="1"></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<textarea class="alamat" type="textarea" name="Kota" id="textarea" placeholder="Kota" cols="35" rows="1"></textarea>
</td>
</tr>
</tr>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" placeholder="example@gmail.com" />
</div>
<div>
<label>No.HP:</label>
<input type="text" name="nohp" id="nohp" placeholder="08xxxxxxxxxx" />
</div>
<div>
<div>
<label>Jenis Kelamin: </label> <br/>
<input type="radio" name="gender" value="male" /> Laki-Laki
<input type="radio" name="gender" value="female" /> Perempuan
</div>
<div>
<label>Tanggal Lahir:</label>
<input type="text" name="tgllahir" id="tgllahir" placeholder="dd/mm/yyyy" />
</div>
<div>
<label>Rubik Yang Disukai: <select name="rubik"></label>
<option value="pilih" selected>--Pilih--</option>
<option value="opini">Opini</option>
<option value="olahraga">Olahraga</option>
<option value="ekonomi">Ekonomi</option>
<option value="politik">Politik</option>
<option value="sosial">Sosial</option>
<option value="bisnis">Bisnis</option>
<option value="kesehatan">Kesehatan</option>
<option value="pendidikan">Pendidikan</option>
<option value="teknologi">Teknologi</option>
<option value="seni">Entertain dan Seni</option>
</select>
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</div>
</body>
</html>
Hasilnya seperti ini :
Tidak ada komentar:
Posting Komentar