Form Pendaftaran Input dan Output dengan JavaScript | HTML
recudo.com - Hay guys,, ketemu lagi nih bersama admin recudo. Selamat malam kalian,, gimana nih kabar kalian..?? Semoga baik - baik saja yah, disini admin akan memberikan tutorial tentang "Form Input dan Output pada HTML dan JavaScript". Lihat baik - baik yah dan disini butuh ketelitian untuk membuat nya. Cekiiddooot..
Pertama kalian harus design seperti gambar dibawah ini.
(gambar input)
(gambar output)
Setelah kalian sudah design seperti diatas, disini admin akan ;angsung memberikan koding nya dibawah ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<script type="text/javascript">
function data(){
var nama= document.input.inama.value;
document.output.onama.value=nama;
var alamat= document.input.ialamat.value;
document.output.oalamat.value=alamat;
var tanggal= document.input.itanggal.value;
document.output.otanggal.value=tanggal;
if(document.input.ijekal[0].checked==true){
document.output.ojekal.value="Laki-Laki";
}
else{
document.output.ojekal.value="Perempuan";
}
var kota= document.input.ikota.value;
document.output.okota.value=kota;
var komentar= document.input.ikomentar.value;
document.output.okomentar.value=komentar;
}
</script>
<script>
function displayResult(frm){
var selectedhobby="";
for (i = 0; i < frm.hobby.length; i++){
if (frm.hobby[i].checked){
selectedhobby += frm.hobby[i].value +". ";
}
}
document.getElementById("result").value=selectedhobby;
}
function displayAlert(frm){
var selectedhobby="";
for (i = 0; i < frm.hobby.length; i++){
if (frm.buah[i].checked){
selectedhobby += frm.hobby[i].value +". ";
}
}
if (selectedhobby==""){ //jika tidak ada buah yg dipilih
alert("Silahkan pilih fobby favoritmu !");
form.hobby[0].focus();
return false;
}
else
alert("hobby favorit kamu : " + selectedhobby);
}
</script>
<style type="text/css">
<!--
.style1 {
font-family: Arial;
font-weight: bold;
font-size: 36px;
color: #FFFFFF;
}
.style2 {color: #FFFFFF}
.style6 {font-family: Arial; font-weight: bold; font-size: 36px; color: #000000; }
-->
</style>
</head>
<body>
<table width="100%" height="761" border="0" bgcolor="#CCCCCC" rules="rows">
<tr>
<td height="757" align="center" valign="top"><table width="80%" height="528" border="0">
<tr>
<td width="100%" height="524" valign="top" bgcolor="#FFFFFF"><blockquote>
<p> </p>
<hr />
<b></b>
<h1 align="center"><b>Tugas Pemrograman Web </b></h1>
<h1 align="center"><b>Input Data</b></h1>
<hr />
<b></b>
<form name="input">
<table width="500" height="400" border="0" align="center" bgcolor=#3300CC>
<tr>
<td width="175" height="39">Nama</td>
<td width="7" bgcolor="#3300CC"> : </td>
<td width="304"> <input type="text" name="inama" size="50"/> </td>
</tr>
<tr>
<td height="42">Alamat</td>
<td> : </td>
<td> <input type="text" name="ialamat" size="50"/> </td>
</tr>
<tr>
<td height="42">Tanggal Lahir</td>
<td> : </td>
<td> <input type="text" name="itanggal" size="50"/> </td>
</tr>
<tr>
<td height="40">Jenis Kelamin</td>
<td> : </td>
<td>
<input type="radio" name="ijekal" value=Laki-Laki/>Laki-Laki
<input type="radio" name="ijekal" value=Perempuan/>Perempuan</td>
</tr>
<tr>
<td height="39">Kota Lahir </td>
<td> : </td>
<td>
<select name="ikota">
<option>--pilih--</option>
<option value="Medan">Medan</option>
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
<option value="Papua">Papua</option>
<option value="Padang">Padang</option>
</select></td>
</tr>
<tr>
<td height="42">Hobby</td>
<td> : </td>
<td><label>
<input type="checkbox" name="hobby" onClick="displayResult(this.form)" value="Bola">Bola</label>
<label>
<input type="checkbox" name="hobby" onClick="displayResult(this.form)" value="Renang" />
Renang</label>
<label>
<input type="checkbox" name="hobby" onClick="displayResult(this.form)" value="Badminton" />
Badminton</label>
<label>
<input type="checkbox" name="hobby" onClick="displayResult(this.form)" value="Basket" />
Basket</label></td>
</tr><tr>
<td>Komentar</td>
<td> : </td>
<td><label></label><label>
<textarea name="ikomentar" cols="40" rows="5"></textarea>
</label></td>
</tr>
<tr>
<td colspan="3" align="right"><input name="button" type="button" onclick="data();" value="Proses"/>
<input name="reset" type="reset" value="Reload"/></td>
</table>
<hr />
</form>
<b>
<hr />
<h1 align="center">Output Data </h1>
<hr />
</b>
<form name="output">
<table width="500" height="334" border="0" align="center" bgcolor="#3300CC">
<tr>
<td width="175">Nama </td>
<td width="10"> : </td>
<td width="304"><input type="text" name="onama" size="50"/> </td>
</tr>
<tr>
<td>Alamat </td><td> : </td>
<td><input type="text" name="oalamat" size="50"/> </td>
</tr>
<tr>
<td>Tanggal Lahir </td><td> : </td>
<td><input type="text" name="otanggal" size="50"/> </td>
</tr>
<tr>
<td>Jenis Kelamin </td><td> : </td>
<td><input type="text" name="ojekal" size="50"/> </td>
</tr>
<tr>
<td>Kota Lahir </td>
<td> : </td>
<td><input name="okota" type="text" id="okota" size="50"/></td>
</tr>
<tr>
<td>Hobby</td><td> : </td>
<td><input type="text" id="result" size="50"/></td>
</tr>
<tr>
<td>Komentar</td>
<td> </td>
<td><input name="okomentar" id="okomentar" rows="5" size="50"></td>
</tr>
</table>
<hr />
</form> </td>
</tr>
</table>
</body>
</html>
Sekian dulu tutorial tentang "Form Input dan Output pada HTML dan JavaScript" tetap nantikan artikel menarik dari recudo ini. Dan semoga bermanfaat bagi kalian semua. Terima Kasih..
EmoticonEmoticon