Tugas PWEB - Form Berita
Nama : Wisnu
NRP : 05111740000170
Kelas : PWEB C
Source Code HTML dan JS:
Hasil Screenshot:
NRP : 05111740000170
Kelas : PWEB C
Source Code HTML dan JS:
<html>
<head>
<link href="form.css" rel="stylesheet" type="text/css">
<title> Form Registrasi </title>
</head>
<tr>
<td width="1038" align="center"> <marquee> <h1> <font face="Rockwell" color="ffffff"> Register Form </font> </h1> </marquee> </td>
</tr>
<div class="container">
<div class="content">
<div class="body">
<div class="header">
<br><p class="textheader" align="center">Form Registrasi</p>
</div>
<div class="border">
<form action="#" method="POST" onSubmit="validasi_input(this)">
<table width="550" border="0">
<tr>
<td>Nama Lengkap</td>
<td><input class="nama" type="text" name="nama" id="name" placeholder="Nama"></td>
</tr>
<td>Alamat</td>
<td>
<textarea class="alamat" type="textarea" name="Nama Jalan" id="textarea" placeholder="Nama Jalan" cols="35" rows="1"></textarea>
</td>
<tr>
<td> </td>
<td>
<textarea class="alamat" type="textarea" name="No" id="textarea" placeholder="No" cols="35" rows="1"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<textarea class="alamat" type="textarea" name="Kota" id="textarea" placeholder="Kota" cols="35" rows="1"></textarea>
</td>
</tr>
</tr>
<tr>
<td>Email</td>
<td><input class="email" type="text" name="email" id="email" placeholder="Email"></td>
</tr>
<tr>
<td>No. HP</td>
<td><input class="tlp" input name="telp" type="text" id="tlp" placeholder="No.HP" ></td>
<tr>
<td>Jenis Kelamin</td>
<td>
<label class="jeniskelamin">
<input type="radio" name="gender" id="laki" value="laki-laki">Laki-Laki
</label>
<label class="jeniskelamin">
<input type="radio" name="gender" id="laki" value="perempuan">Perempuan
</label>
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>
<div>
<select class="tgllahir" name="tanggal">
<option value="Tanggal" selected>Tanggal</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="tgllahir" name="bulan">
<option value="Bulan" selected>Bulan</option>
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="Juni">Juni</option>
<option value="Juli">Juli</option>
<option value="Agustus">Agustus</option>
<option value="September">September</option>
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
</select>
<select class="tgllahir" name="Tahun">
<option value="Tahun" selected>Tahun</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Rubrik Favorit</td>
<td>
<div>
<select class="rubrik" name="rubrik">
<option value="rubrik" selected>pilih salah satu</option>
<option value="Teknologi">Teknologi</option>
<option value="Olahraga">Olahraga</option>
<option value="Seni">Seni</option>
<option value="Opini">Opini</option>
<option value="Ekonomi">Ekonomi</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<button class="submit" type="submit" value="Sub">Submit</button>
<button class="reset" type="res" value="res">Reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<footer>
<p> <marquee><font face="Rockwell" color="ffffff"> Copyright © 2018. Saya mencontoh internet</font> </marquee></p>
</footer>
</body>
<script type="text/javascript">
function validasi_input() {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var alamat = document.getElementById("alamat").value;
var NO HP = document.getElementById("tlp").value;
if (nama != "" && email!="" && alamat !="" && tlp!="") {
return true;
}else{
alert("Anda harus mengisi data dengan lengkap !");
}
}
</script>
<script type="text/javascript">
function validasi_input(form){
if (form.rubrik.value =="pilih"){
alert("Anda belum memilih rubrik favorit!");
return (false);
}
return (true);
}
</script>
<script type="text/javascript">
function validasi_input(form){
function check_radio(radio)
{
for (i = 0; i < radio.length; i++)
{
if (radio[i].checked === true)
{
return radio[i].value;
}
}
return false;
}
var radio_val = check_radio(form.jk);
if (radio_val === false)
{
alert("Anda belum memilih Jenis Kelamin!");
return false;
}
return (true);
}
</script>
<script type="text/javascript">
function validasi_input(form){
email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!email.test(form.email.value)){
alert ('Penulisan Email tidak benar');
form.email.focus();
return false;
}
return (true);
}
</script>
<script type="text/javascript">
function validasi_input(form){
if (form.tlp.value != ""){
var x = (form.tlp.value);
var status = true;
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
for (i=0; i<=x.length-1; i++)
{
if (x[i] in list) cek = true;
else cek = false;
status = status && cek;
}
if (status == false)
{
alert("No. HP harus terdiri dari angka!");
form.tlp.focus();
return false;
}
}
return (true);
}
</script>
</html>Source Code JS
.container{
margin-top: 10px;
margin-left: 400px;
}
.border{
border: 5px solid #00008B;
width: 550px;
height: 550px;
}
.header{
width: 560px;
height: 130px;
background-color: #00008B;
border-radius: 3px 3px 0 0;
}
.textheader{
color: #FFFFFF;
text-align: center;
font-size: 18pt;
font-family: Times New Roman;
padding-top: 12px;
height: 30px;
}
.textheader:hover{
color: #ff0000;
}
.body{
width: 550px;
height: 680px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 6px 6px 0 0 #ffffff;
}
.email{
font-family: Times New Roman;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #000000;
padding-left: 5px;
margin-top: 10px;
margin-left: 15px;
display: compact;
box-shadow: #000000;
border-radius: 5px;
}
.nama{
font-family: Times New Roman;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #000000;
padding-left: 5px;
margin-top: 10px;
margin-left: 15px;
display: compact;
box-shadow: #000000;
border-radius: 5px;
}
.alamat{
font-family: Times New Roman;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #000000;
padding-left: 5px;
margin-top: 10px;
margin-left: 15px;
display: compact;
box-shadow: #000000;
border-radius: 5px;
}
.jeniskelamin{
font-family: Times New Roman;
color:#000000;
margin-top: 35px;
margin-left: 15px;
width: 15px;
height: 15px;
position: relative;
top: 0px;
display: compact;
}
.submit:hover{
background-color: #ff0000;
color: #ffffff;
}
.footertext{
margin-top: 5px;
text-align: center;
font-family: Times New Roman;
font-size: 12pt;
color: #ffffff;
}
.rubrik{
font-family: Times New Roman;
font-size: 12pt;
color: #000000;
border: 1px solid #000000;
margin-left: 15px;
height: 30px;
margin-right: -18px;
}
.rubriktext{
margin-left: 15px;
color: #000000;
font-family: Times New Roman;
font-size: 12pt;
text-align: left;
}
.tgllahir{
font-family: Times New Roman;
font-size: 12pt;
color: #000000;
border: 1px solid #000000;
margin-left: 15px;
height: 30px;
margin-right: -18px;
}
.tgllahirtext{
margin-left: 15px;
color: #000000;
font-family: Times New Roman;
font-size: 12pt;
text-align: left;
}
.jeniskelamintext{
margin-left: 15px;
color: #000000;
font-family: Times New Roman;
font-size: 12pt;
text-align: left;
}
.tlp{
font-family: Times New Roman;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #000000;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow:#000000;
border-radius: 5px;
}
.file{
font-family: Times New Roman;
color: #000000;
margin-top: 55px;
margin-left: 15px;
width: 200px;
height: 25px;
position: relative;
top: -30px;
display: compact;
}
.content{
padding: 10px;
padding-bottom: 30px;
}
.submit{
position:relative;
box-sizing:border-box;
display:block;
width:100px;
border: 0px none;
padding: 0px 15px;
text-align:center;
font-family:Times New Roman;
font-weight:400;
text-shadow: 0px 0px 0px transparent;
border-radius: 4px;
color:#FFF;
background:#00008B none repeat scroll 0% 0%;
height: 30px;
line-height: 29px;
font-size: 16px;
margin:auto;
margin-top:10px;
}
.reset{
position:relative;
box-sizing:border-box;
display:block;
width:100px;
border: 0px none;
padding: 0px 15px;
text-align:center;
font-family:Times New Roman;
font-weight:400;
text-shadow: 0px 0px 0px transparent;
border-radius: 4px;
color:#FFF;
background:#00008B none repeat scroll 0% 0%;
height: 30px;
line-height: 29px;
font-size: 16px;
margin:auto;
margin-top:10px;
}
#footer{
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: silver 1px solid;
position: absolute;
bottom: 0px;
background-color: #cccccc;
}Hasil Screenshot:
Komentar
Posting Komentar