Assalamu'alaikum, Wr. Wb
Bismillahirrohmanirrohim.
Apa kabar semua...? mudah-mudahan kali ini kita diberi perlindungan oleh tuhan YME agar kita mampu melaksanakan kegiatan-kegiatan dengan baik dan senantiasa bersyukur atas nikmat yang telah di berikan kepada kita.
Ok, langsung saya jabarkan tentang apa yang akan kita pelajari bersama pada kesempatan kali ini.
memang belajar html memerlukan kesabaran dan waktu yang cukup untuk menghasilkan sebuah design yang bagus, nah kali ini saya akan menunjukan bagaimana cara membuat form html serta syntag-syntag apa saja yang diperlukan serta fungsi penggunaannya.
contoh tampilan formulir yang akan dibuat:
ok baiklah, langkah pertama yang harus kita buat adalah
============================================================
LANGKAH PERTAMA
membuat dasar html seperti biasa
kode:
============================================================
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
(copy paste script tersebut)
============================================================
LANGKAH KEDUA
copy paste kode ini pada body !!
============================================================
<body id="bar" style="font-family: Arial; font-size:12px;">
<form type="texfield" method="post" action="proses.php">
<table>
<tr style="background-color: #AFEEEE;" >
<td><span id="LbUsername">Username:</span></td>
<td>
<input type="text" value="" id="txtUsername" name="txtUsername" size="100"/>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="text" value="" id="txtPassword" name="txtPassword" size="100"/>
</td>
</tr>
<tr style="background-color: #AFEEEE;" >
<td valign="top">Alamat:</td>
<td>
<textarea cols="76" rows="" id="5" name="" style="border: 1px solid red;"></textarea>
</td>
</tr>
<tr>
<td>Jenis Kelamin:</td>
<td>
<input type="radio" name="radJK" checked="checked"/>pria </br>
<input type="radio" name="radJK"/>wanita
</td>
</tr>
<tr style="background-color: #AFEEEE;" >
<td>Status:</td>
<td>
<input type="radio" name="radStatus" checked="checked"/>single
<input type="radio" name="radStatus"/>married
<input type="radio" name="radStatus"/>discovered</br>
</td>
</tr>
<tr>
<td>Hoby:</td>
<td>
<input type="checkbox" name="checkHoby" checked="checked"/>mancing
<input type="checkbox" name="checkHoby"/>berenang
<input type="checkbox" name="checkHoby"/>bersepeda</br>
</td>
</tr>
<tr>
<td style="background-color: #AFEEEE;">Kendaraan:</td>
<td>
<input type="checkbox" name="checkHoby" checked="checked"/>mio
<input type="checkbox" name="checkHoby"/>honda jazz
<input type="checkbox" name="checkHoby"/>yamaha</br>
</td>
</tr>
<tr>
<td>negara:</td>
<td>
<select id="" name="selNegara">
<option>-pilih negara-</option>
<option>negara1</option>
<option>negara2</option>
<option>negara3</option>
</td>
</tr>
<tr style="background-color: #AFEEEE;">
<td valign="top">Minuman:</td>
<td>
<select id="" name="selMinuman" multiple="multiple" size="20">
<option selected>jus jambu</option>
<option>jus jeruk</option>
<option>jus mangga</option>
<option>jus jeruk</option>
</td>
</tr>
<tr>
<td>Foto:</td>
<td><input type="file"/></td>
</tr>
<tr style="background-color: #AFEEEE;">
<td></td>
<td>
<input type="reset" value="simpan" style="padding: 12px; color: red;"/>
<input type="submit" value="kosongkan" style="padding: 12px; color: red;"/>
</td>
</tr>
</table>
<!-- <input type="image" src="image1.png" />
<button>Ini button submit juga</button> -->
</form>
<input type="button" value="Semarang wes" onclick="foo();" />
<script>
function foo() {
//alert("STIKOM sby");
//document.getElementById("bar").setAttribute("style", "background-color: pink;");
//document.getElementById("myForm").setAttribute("style", "display: none;");
document.getElementById("lbUsername").innerHTML = "??????";
}
</script>
</body>
============================================================
============================================================
LANGKAH KETIGA
copy script ini di bawah <head>
<title>formulir pendaftaran</title>
<meta charset="UTF-8" />
<style>
input:focus, textarea:focus {
background-color: #E0FFFF;
}
</style>
============================================================
silakan pelajari syntag syntag tersebut dengan teliti, maka lambat laun akan mengerti dengan sendirinya.
sekian. semoga bermanfaat (^^)
2 komentar:
test
thanks..
Posting Komentar