NRP : 05111740000068
Kelas : Pemrograman Web C
Pada postingan saya kali ini, saya akan membagikan hasil tugas saya yaitu membuat form validasi dengan HTML, CSS dan Javascript. berikut link, Screenshot dan Source code dari form tersebut. CLICK HERE
Screenshot
Source Code
1. HTML
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="formst.css">
<script type="text/javascript" src="formjs.js"></script>
</head>
<body>
<center><h2>REGISTER</h2></center>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="name" placeholder="Enter Your Name" id="name" maxlength="50" required />
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat" placeholder="Enter Your Address" id="alamat" required ></textarea>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter Your E-mail"id="email" required />
</div>
<div>
<label>Password:</label>
<input type="password" name="pass1" placeholder="Enter Your Password"id="pass1" required />
</div>
<div>
<label>No. HP:</label>
<input type="phone" name="phone" placeholder="Enter Your Phone Number" id="phone" min="11" max="13" required/>
</div>
<div>
<label>Jenis Kelamin: </label> <br/>
<input type="radio" name="gender" value="male" /> Pria
<input type="radio" name="gender" value="female" /> Wanita <br/>
</div>
<div>
<label>Tanggal Lahir:</label>
<input type="date" id="birthday" name="birthday" id="birthday" min="01-01-1900" max="31-12-2018" required />
</div>
<div>
<label>Rubrik Favorit:</label>
<input type="text" name="fav" placeholder="Enter Your Personal Insterest" required />
</div>
<div>
<center><input type="submit" value="Submit" class="tombol"><center>
</div>
</form>
</div>
</body>
</html>
2. CSS
body {
background: #00008B;
font-family: calibri;
}
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="phone"],
input[type="date"],
input[type="password"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-family: calibri;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #4682B4;
color: #fff;
border: 0;
padding: 5px 8px;
}
3. Javascript
function validasi() {
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var gender = document.getElementById("gender").value;
var birthday = document.getElementById("birthday").value;
var fav = document.getElementById("fav").value;
var maxhuruf = 50;
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!pola_email.test(form.email.value)){
alert ('Penulisan Email tidak benar');
form.email.focus();
return false;
}
if (form.nama.value.length > maxhuruf){
alert("Batas Maksimal adalah 50 Karakter");
form.nama.focus();
return (false);
}
if (nama = "" || email="" || alamat ="" || phone ="" || gender ="" || birthday ="" || fav ="") {
alert('Anda harus mengisi data dengan lengkap !');
return (false);}
}
}
Sekian postingan dari saya kali ini.
No comments:
Post a Comment