Tugas Kali ini adalah membuat halaman form Sign Up
Link web : Halaman Sign Up
Kodingan signup.css:
Link web : Halaman Sign Up
Kodingan signup.htm:
<!DOCTYPE html>
<html>
<head>
<title>Berita Garing</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" type="text/css" href="signup.css">
</head>
<body>
<div class="topnav">
<a href="index.htm">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="signup.htm">Sign Up</a>
<div class="login-container">
<form action="/action_page.php">
<input type="text" placeholder="Username" name="username">
<input type="text" placeholder="Password" name="psw">
<button type="submit">Login</button>
</form>
</div>
</div>
<div class="header">
<div class="jarak">
<h2>BERITA ASING</h2>
</div>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<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>Password:</label>
<input type="Password" placeholder="Enter Password" name="pass" 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>
<br>
<input type="submit" value="Sign Up" class="tombol">
</div>
</form>
</div>
<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>
</div>
<!--kiri-->
<!--kanan-->
<div class="kanan">
<div class="jarak">
<h3>TAG</h3>
<hr/>
<p><a href="#" class="undecor">Teknologi</a></p>
</div>
</div>
<!--kanan-->
</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyright 2018 Zico Ritonda all reserved</p>
</div>
</div>
</body>
</html>
Kodingan signup.css:
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="Password"],
input[type="email"],
input[type="phone"],
input[type="date"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-family: sans-serif;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #FF7F50;
color: #fff;
border: 0;
padding: 5px 8px;
}
Komentar
Posting Komentar