Tugas kali ini saya membuat sebuah Form Registrasi untuk web berita saya
untuk form yang saya buat, saya membuat nya dalam bentuk Modal, yaitu adalah pop-up jika tombol register di klik
Berikut adalah hasil dari apa yang saya buat
Ini adalah website berita saya
Kemudian jika tombol register di klik akan muncul form pop-up
Berikut adalah source code nya :
HTML:
Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C
untuk form yang saya buat, saya membuat nya dalam bentuk Modal, yaitu adalah pop-up jika tombol register di klik
Berikut adalah hasil dari apa yang saya buat
Ini adalah website berita saya
Kemudian jika tombol register di klik akan muncul form pop-up
Berikut adalah source code nya :
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="inicss.css"/>
</head>
<body>
<div class="header">
<h1>PIAL ROSE NEWS</h1>
</div>
<ul>
<li><a class="active" href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Events</a></li>
<li><a onclick="document.getElementById('signup').style.display='block'" style="width:auto;" class="reg">Register</a></li>
</ul>
<div id="signup" class="modal">
<span onclick="document.getElementById('signup').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" name="myForm">
<div class="container">
<h1>Sign Up for More Pial Rose News</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Your Name" name="name" maxlength="50" >
<label for="address"><b>Address</b></label>
<input type="text" placeholder="Street Name, Number, City" name="address" >
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" >
<label for="phone"><b>Phone Number</b></label>
<br>
<input type="phoneno" placeholder="Enter Your Phone Number" name="phone" min="10" max="12" ><br><br>
<label for="birthdate"><b>Date of Birth</b></label><br>
<input type="date" name="birthdate" ><br><br>
<label for="gender"><b>Gender</b></label>
<div style="padding-top: 10px;">
Pria <input type="radio" name="gender" value="Pria">
Wanita <input type="radio" name="gender" value="Wanita">
</div>
<br>
<div>
<label><b>Favorite Rubrik</b></label><br>
<select name="rubrik" >
<option name="rubrik">Opini</option>
<option name="rubrik">Olahraga</option>
<option name="rubrik">Ekonomi</option>
<option name="rubrik">Politik</option>
<option name="rubrik">Others</option>
</select>
</div><br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" >
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<div class="clearfix">
<button type="button" onclick="document.getElementById('signup').style.display='none'" class="cancelbtn">Cancel</button>
<button class="signupbtn" onclick=" return validateForm()">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('signup');//script pemanggil modal
window.onclick = function(event) {//jika pengguna meng-click area diluar modal maka modal
if (event.target == modal) {//akan di close
modal.style.display = "none";
}
}
function showalert(){
alert("Your Account has been Registered");
}
function validateForm() {
var x = document.forms["myForm"]["name"].value;
var x1 = document.forms["myForm"]["address"].value;
var x2 = document.forms["myForm"]["email"].value;
var x3 = document.forms["myForm"]["phone"].value;
var x4 = document.forms["myForm"]["birthdate"].value;
var x5 = document.forms["myForm"]["psw"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
if(x1 == ""){alert("Address must be filled out");return false;}
if(x2 == ""){alert("E-Mail must be filled out");return false;}
if(x3 == ""){alert("Phone Number must be filled out");return false;}
if(x4 == ""){alert("Birth Date must be filled out");return false;}
if(x5 == ""){alert("Password must be filled out");return false;}
alert("Your Account has been Registered");
}
</script>
<div class = "content" >
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/feetup.0.jpg"/>Roku will soon let you control its devices and Roku TVs with Google Assistant</p>
<p style="font-family: Slim Joe; font-size:17px;">Users will be able to launch specific streaming apps, control playback (play/pause/etc.), search for content, and “go home” by talking to a nearby Google Home speaker or to Assistant on their mobile phone.This also opens up a lot of potential for incorporating Roku hardware into your Google Assistant routines.</p>
</div>
<div class = "content" >
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/belkin.jpg"/>Belkin’s Boostup wireless dock can charge three Apple devices at once</p>
<p style="font-family: Slim Joe; font-size:17px;">It’s not quite AirPower, but Belkin’s latest charging dock gives you a convenient way of charging up to three Apple devices simultaneously. The Boostup Wireless Charging Dock has a pair of elevated wireless charging pads to power your iPhone and Apple Watch, and a USB Type-A port for charging a third device, like an AirPods case.</p>
</div>
<div class = "content">
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/iphonexs.0.0.jpg"/>The iPhone XS Max is outselling the iPhone XS, according to analyst report</p>
<p style="font-family: Slim Joe; font-size:17px;">Kuo’s report says that demand for the iPhone XS Max is higher than expected, and is about three to four times higher than demand for the iPhone XS. Gold and space grey are far more popular than silver when it comes to color options, and the 256GB version is the most popular. The note also says that the 512GB version could face a shortage because of reliance on Samsung as a supplier.</p>
</div>
<div class = "footer">
<ul>
<li><a href="#"><img class = "socialimg" src="img/001-twitter-logo-button.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/002-facebook-logo-button.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/003-instagram-logo.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/004-youtube-symbol.png"/></a></li>
</ul>
</div>
</body>
</html>
body{
margin: 0;
}
h1{
margin: 0;
}
ul {
list-style-type: none;
margin: auto;
padding-left: 135px;
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f5f5f0;
}
li {
float: left;
padding-right: 10px;
}
li a {
display: block;
color: #7a7a52;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: black;
}
@font-face {
font-family: Slim Joe;
src: url(Slim Joe.otf);
font-family: Big John;
src: url(BIG JOHN.otf);
}
.header{
/* width: 100%; */
height: 250px;
line-height: 120px;
background-image: url("img/Picture1.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.header h1{
font-size: 50px;
color: white;
text-align: center;
line-height: 200px;
}
.active {
background-color: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
}
.contain{
width: 80%;
margin: auto;
}
.content{
padding-top: 20px;
padding-bottom: 60px;
width: 80%;
margin: auto;
}
.newsimg{
float: left;
width: 30%;
padding-right: 20px;
}
.footer{
width: 100%;
padding-top: 20px;
height: 70px;
text-align: center;
background-color: #333;
}
.footer p{
color: cyan;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-bottom: 15px;
overflow: hidden;
background-color: #333;
}
.footer li {
float: right;
}
.footer li a {
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
.socialimg{
width: 70%;
}
* {box-sizing: border-box;}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
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;
}
.reg{
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.85);
padding-top: 50px;
color: white;
}
.modal-content {
background-image: url("img/Picture1.jpg");
background-size: cover;
margin: 5% auto 15% auto;
width: 60%;
border-radius: 15px;
}
hr {
border: 2.5px solid #f1f1f1;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 175px;
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%;
}
}
Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C
Comments
Post a Comment