1. html
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center><h2>SIGN UP FOR FREE</h2></center>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" placeholder="Enter Your Name" id="nama" 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 E-mail"id="email" 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" /> L <br/>
<input type="radio" name="gender" value="female" /> P <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>Kolom Favorit:</label>
<input type="text" name="fav" list="fav" placeholder="Teknologi,Olahraga, etc" required/>
<datalist id="fav">
<option value="Teknologi"></option>
<option value="Olahraga"></option>
<option value="Politik"></option>
<option value="Ekonomi"></option>
<option value="Lainnya"></option>
</datalist>
</div>
<div>
<label>Password:</label>
<input type="text" placeholder="Enter Password" name="pass" required>
</div>
<div>
<input type="submit" value="Sign Up" class="tombol">
</div>
</form>
</div>
</body>
<script type="text/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);}
}
}
</script>
</html>
2. CSS
body {
background: #fff;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
h2 {
color: #EA2323;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #BF1F1F;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #fff;
}
input[type="text"],
input[type="email"],
input[type="phone"],
input[type="date"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-family: "lato", cursive, sans-serif;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #FF7F50;
color: #fff;
border: 0;
padding: 5px 8px;
}
Tidak ada komentar:
Posting Komentar