Jumat, 11 Januari 2013

Penggabungan Form dalam CSS dan Java Script (Validasi)

Berikut Print Screen dari web saya :

dengan koding sebagai berikut :

<html>
<head>
<title>pertemuan 11</title>

<script language="JavaScript" type="text/javascript">
function konfirmasi()
{
var answer = confirm("Anda udah isi?");
if(answer)
{
validasi();
}
else
alert("stay Still");
}

function validasi()
{
{
if(document.formulir.nama.value=="")
alert("isi nama");
}
{
if(document.formulir.password.value=="")
alert("isi kaat kunci");
}
{
if((document.formulir.jk[0].checked==false) && (document.formulir.jk[1].checked==false))
alert("isi jenis kelamin");
}
{
if(document.formulir.alamat.value=="")
alert("isi alamat");
}
{
if((document.formulir.cbx[0].value=="") && (document.formulir.cby[1].value=="") && (document.formulir.cbz[2].value==""))
alert("isi jenis kelamin");
}
{
if(document.formulir.fakultas.selectedIndex==0)
alert("isi fakultas");
}
}
</script>

<style type="text/css">
.container {
margin:0px auto;
width:800px;
border:1px solid black;
overflow:auto;
}
.row
{
width:530px;
}

.rowsatu {
width:100px;
height:50px;
max-height:50px;
font-size:15px;
font-family:calibri;
margin: 10px;
text-align:left;
display:block;
float:left;
}

.rowdua {
width:60px;
height:50px;
max-height:50px;
font-size:15px;
font-family:calibri;
margin: 10px;
text-align:left;
display:block;
float:left;
}

.rowtiga {
width:230px;
height:50px;
max-height:50px;
font-size:15px;
font-family:calibri;
margin: 10px;
text-align:left;
display:block;
float:left;
}

.footer {
text-align:bottom;
}
</style>
</head>
<body>
<div class="container">
<form name="formulir" method="post">
<div class="row">
<div class="rowsatu"> <b>Nama</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <input type="text" name="nama" value="" placeholder="nama" /> </div>
</div>

<div class="row">
<div class="rowsatu"> <b>Kata Kunci</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <input type="password" name="password" value="" placeholder="kata kunci" /> </div>
</div>

<div class="row">
<div class="rowsatu"> <b>Jenis Kelamin</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <input type="radio" name="jk" value="" />Pria</input>
<input type="radio" name="jk" value="" />Wanita</input>
</div>
</div>

<div class="row">
<div class="rowsatu"> <b>Alamat</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <textarea name="alamat" placeholder="alamat" /></textarea></div>
</div>

<div class="row">
<div class="rowsatu"> <b>Hobi</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <input type="checkbox" name="cbx" value="" />Tae Kwon Do
<input type="checkbox" name="cby" value="" />Futsal
<input type="checkbox" name="cbz" value="" />Renang
</div>
</div>

<div class="row">
<div class="rowsatu"> <b>Fakultas</b> </div>
<div class="rowdua"> <b>:</b> </div>
<div class="rowtiga"> <select name="fakultas">
<option value="">-Pilih-</option>
<option value="html">Fakultas Teknologi dan Desain</option>
<option value="html">Fakultas Ilmu Sosial dan Humaniora</option>
</select></div>
</div>
<br />
<div class="footer">
<input type="submit" value="Submit" onClick="konfirmasi();" />
<input type="reset" value="Reset" />
</div>
</form>
</div>
</body>
</html>

Jika ada yang ingin ditanyakan, silakan komentar. Terima kasih :)


Tidak ada komentar:

Posting Komentar