Tugas PWEB C - Sign Up Form
Tugas Pemrograman Web kali ini yaitu membuat Sign Up Form pada halaman web.
Nama : Ifta Jihan N
NRP : 05111740000034
Kelas : PWeb C
Link website: Link
Form yang saya buat yaitu pop-up form, form akan pop-up apabila Sign Up diklik.
Berikut ini adalah source codenya:
1. HTML
<!DOCTYPE html>
<html>
<head>
<title>World News</title>
<link rel="stylesheet" href="cnews.css"/>
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<div class="header">
<div class="jarak">
<h1 id="fontheader">World News</h1>
</div>
</div>
<div class="menu">
<ul>
<li><a class="pilih" href="#">News</a></li>
<li><a href="#">Job</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">About</a></li>
<li style="float: right;"><a onclick="document.getElementById('signup').style.display='block'" class="point">Sign Up</a></li>
</ul>
</div>
<div id="signup" class="modal">
<span onclick="document.getElementById('signup').style.display='none'" class="close" title="Close Modal">x</span>
<form class="modal-content" name="signupform">
<div class="container">
<h1 style="text-align: center; font-family: Verdana; font-size: 25px;">Sign Up</h1>
<hr>
<label for="nama"><b>Name</b></label>
<input type="text" placeholder="Name" name="nama" maxlength="50" required>
<label for="alamat"><b>Address</b></label>
<input type="text" placeholder="Address" name="alamat" required>
<label for="email"><b>Email Address</b></label>
<input type="text" placeholder="Email" name="email" required>
<label for="nohp"><b>Phone Number</b></label>
<input type="tel" placeholder="Phone Number" name="nohp" minlength="10" maxlength="12" required>
<label for="gender"><b>Gender</b></label>
<select>
<option value="L">Male</option>
<option value="P">Female</option>
</select>
<label for="alamat"><b>Birthday</b></label>
<input type="date" name="bday" required>
<label for="rubrik"><b>Favorite Rubric</b></label>
<select>
<option value="sport">Sports</option>
<option value="economics">Economics</option>
<option value="Politics">World Politics</option>
<option value="science">Science & Technology</option>
<option value="others">Others</option>
</select>
<label for="password"><b>Password</b></label>
<input type="password" id="password" onkeyup="return passwordChanged();" placeholder="Password" name="password" required>
<span id="strength"></span>
<div class="clearfix">
<button type="button" onclick="document.getElementById('signup').style.display='none'" class="cancelbtn">Cancel</button>
<button type="button" value="submit" class="signupbtn" onclick="validate_form()">Sign Up</button>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('signup');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function passwordChanged() {
var strength = document.getElementById('strength');
var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})");
var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
var enoughRegex = new RegExp("(?=.{6,}).*");
var pwd = document.getElementById("password");
if (pwd.value.length==0) {
strength.innerHTML = 'Type Password';
}
else if (false == enoughRegex.test(pwd.value)) {
strength.innerHTML = 'More Characters';
}
else if (strongRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:green">Strong!</span>';
}
else if (mediumRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:orange">Medium!</span>';
}
else {
strength.innerHTML = '<span style="color:red">Weak!</span>';
}
}
function validate_form(){
var name = document.forms["signupform"]["nama"];
var email = document.forms["signupform"]["email"];
var hp = document.forms["signupform"]["nohp"];
var bday = document.forms["signupform"]["bday"];
var pass = document.forms["signupform"]["password"];
if(name.value == "") {alert("Please enter your name"); return false;}
if(email.value == "") {alert("Please enter your email"); return false;}
if(hp.value == "") {alert("Please enter your phone number"); return false;}
if(bday.value == "") {alert("Please enter your Birthday"); return false;}
if(pass.value == "") {alert("Please enter your password"); return false;}
if(pass.value)
alert("Form Submitted Successfully");
}
</script>
<div class="menu1">
<ul>
<li><a href="#">Categories <i class="down"> </i></a></li>
<li><a href="#">Markets <i class="down"></i></a></li>
<li><a href="#">Writers <i class="down"></i></a></li>
</ul>
</div>
<div class="isi">
<div class="jarak">
<div class="kiri">
<div class="border">
<div class="jarak">
<img src="silicon valley.png" class="imgisi">
<h1>How one Silicon Valley investor helps US startups enter Japan</h1>
<p>Hire the right country manager.</p>
<button class="readbtn">Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<img src="sg.png" class="imgisi">
<h1>Singapore introduces new rules for bike-share users, fines for abusers</h1>
<p>The rules are part of the Land Transport Authority’s new licensing regime for bike-sharing services.</p>
<button class="readbtn">Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<img src="oyo.png" class="imgisi">
<h1>In brief: Oyo Rooms books $1b from Sequoia, Softbank, and others</h1>
<p>The capital will fuel the Indian startup’s international expansion.</p>
<button class="readbtn">Read More..</button>
</div>
</div>
</div>
<div class="kanan">
<div class="jarak">
<h2 style="text-align: left; font-size: 14px;">Latest Jobs</h2>
<img src="seb.png" style="float: left;width: 35px;height: 35px;">
<h3>Software Engineer-Backend</h3>
<p>Ritase</p>
<img src="gd.png" style="float: left;width: 35px;height: 35px;">
<h3>Graphic Designer</h3>
<p>MetroResidences</p>
<img src="snd.png" style="float: left;width: 35px;height:35px;">
<h3>Senior NodeJS Developer</h3>
<p>2359media</p>
<img src="it.png" style="float: left;width: 35px;height: 35px;">
<h3>IT Programmer</h3>
<p>Virtues International</p>
</div>
<div class="footer" >
<div class="jarak">
<ul>
<li><a href="#"><img class="sosmed" src="s_instagram.png"></a></li>
<li><a href="#"><img class="sosmed" src="s_facebook.png"></a></li>
<li><a href="#"><img class="sosmed" src="s_twitter.png"></a></li>
<li><a href="#"><img class="sosmed" src="s_youtube.png"></a></li>
<li><a href="#"><img class="sosmed" src="s_email.png"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. CSS
body{
background: white;
width: 100% ;
font-family: sans-serif;
margin: 0;
}
.header{
margin: auto;
width: 90%;
height: 80px;
line-height: 8px;
background-color: darkcyan;
}
#fontheader{
float: left;
font-size: 50px;
font-family: sans-serif;
color: white;
}
#fontheader2{
float: right;
font-size: 20px;
font-family: sans-serif;
color: white;
}
.pilih{
background-color: white;
}
.menu{
background-color: lavender;
height: 40px;
line-height: 40px;
position: relative;
width: 90%;
margin: auto;
padding:0;
}
.menu ul{
list-style-type: none;
position: sticky;
position: -webkit-sticky;
}
.menu ul li a{
float: left;
display: block;
color: black;
padding: 0px 20px;
text-decoration: none;
font-family: sans-serif;
}
.menu ul li a:hover{
display: block;
background-color: gainsboro;
}
i {
border: solid black;
border-width: 0 3px 5px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.menu1{
background-color: white;
height: 60px;
line-height: 60px;
margin: 0;
}
.menu1 ul{
list-style: none;
}
.menu1 ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: grey;
text-decoration: none;
font-family: sans-serif;
}
.menu1 ul li a:hover{
background-color: white;
display:block;
}
.imgisi{
float: left;
width: 300px;
height: 200px;
padding-right: 20px;
}
.jarak{
padding: 0 2pc;
}
.isi{
width: 97%;
margin: auto;
background: #fff;
color: #333;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #fff;
}
.kanan{
width: 27%;
float: left;
margin : auto;
background: #fff;
}
.border{
height: 200px;
margin-top: 1pc;
padding-bottom: 3pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
.readbtn{
background: darkcyan;
border-radius: 5px;
color: white;
width: 15%;
}
.footer{
width: 90%;
margin: auto;
height: 50px;
line-height: 50px;
background: darkcyan;
}
.footer ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
}
.footer ul li{
display: table-cell;
padding: 3px;
}
.footer ul li a{
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
.sosmed{
width: 100%;
}
.kanan p{
font-size: 12px;
margin: 0;
text-align:center;
margin: 10px;
color:#E0E0DE;
}
h1{
font-family: "sans-serif";
font-weight: bold;
font-size: 24px;
}
p{
font-family: "Verdana";
font-size: 14px;
font-weight: lighter;
color: #B2B2B2;
}
h3{
font-family: "Verdana";
font-size: 13px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
h2{
font-family: "Arial";
font-weight: lighter;
text-align: center;
font-size: 13px;
}
@media screen and (max-width: 300px) {
}
*{box-sizing: border-box}
input[type=text], input[type=password], input[type=tel], input[type=date], select{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=date]:focus, select{
background-color: #ddd;
outline: none;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.point{
cursor: pointer;
}
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.container {
padding: 16px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
padding-top: 50px;
}
.modal-content {
border-radius: 15px;
background-color: #F8F8FF;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 50%;
}
hr {
border: 1px solid black;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
Hasil webnya dapat dilihat disini . Terimakasih
Comments
Post a Comment