Disini Anda akan berlatih membuat form dengan segala obyeknya. Tetapi hanya sekedar form untuk mengumpulkan data secara interaktif, tanpa memproses data tersebut. Di bagian ini belum akan dibicarakan tentang pemrosesan data, oleh karena itu silakan mencoba-coba setiap obyek dalam form saja, dengan berbagai cara penempatannya yang memungkinkan. Seperti Field teks, Field password, Checkbox, Tombol radio, Kotak drop down sederhana, Kotak drop down yang memiliki nilai default, Membuat tombol, Fieldset di sekeliling Data, Form dengan field input & tombol submit, Form dengan Checkbox, Form dengan tombol radio dan Mengirim e-mail dari suatu form
Field teks
<html>
<body>
<form>
Nama depan:
<input type=”text” name=”namadepan”>
<br>
Nama belakang:
<input type=”text” name=”namabelakang”>
</form>
</body>
</html>
Field password
<html>
<body>
<form>
ID Pengguna:
<input type=”text” name=”user”>
<br>
Password:
<input type=”password” name=”password”>
</form>
</body>
</html>
Perhatikan bahwa ketika Anda mengetikkan karakter-karakter dalam suatu field password, browser akan menampilkan asterisk atau bullet saja, bukannya karakter yang diketikkan.
Checkbox
<html>
<body>
<form>
Saya memiliki sebuah sepeda:
<input type=”checkbox” name=”Sepeda”>
<br>
Saya memiliki sebuah mobil:
<input type=”checkbox” name=”Mobil”>
</form>
</body>
</html>
Tombol radio
<html>
<body>
<form>
Pria:
<input type=”radio” checked
name=”Sex” value=”pria”>
<br>
Wanita:
<input type=”radio”
name=”Sex” value=”wanita”>
</form>
</body>
</html>
Ketika seorang pengguna memberikan klik mouse pada sebuah tombol radio, tombol tersebut terlihat diberi tanda cek, dan semua tombol lain yang berada dalam nama yang sama akan kehilangan tanda cek-nya
Kotak drop down sederhana
<html>
<body>
<form>
<select name=”Mobil”>
<option value=”volvo”>Volvo
<option value=”peugeot”>Peugeot
<option value=”fiat”>Fiat
<option value=”jaguar”>Jaguar
</select>
</form>
</body>
</html>
Kotak drop down yang memiliki nilai default
<html>
<body>
<form>
<select name=”mobil”>
<option value=”volvo”>Volvo
<option value=”peugeot”>Peugeot
<option value=”fiat” selected>Fiat
<option value=”jaguar”>Jaguar
</select>
</form>
</body>
</html>
Membuat tombol
<html>
<body>
<form>
<input type=”button” value=”Hello world!”>
</form>
</body>
</html>
Fieldset di sekeliling Data
<html>
<body>
<fieldset>
<legend>
Informasi kesehatan:
</legend>
<form>
Tinggi <input type=”text” size=”3″>
Berat <input type=”text” size=”3″>
</form>
</fieldset>
</body>
</html>
Bila tidak terlihat adanya border di sekeliling form input, browser Anda sudah terlalu lama.
Form dengan field input & tombol submit
<html>
<body>
<form name=”input” action=”http://www.w3c.org/form_action.asp” method=”get”>
Masukkan nama depan Anda:
<input type=”text” name=”namadepan” value=”Mickey”>
<br>Masukkan nama belakang Anda:
<input type=”text” name=”namabelakang” value=”Mouse”>
<br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Bila Anda meng-klik tombol “Submit”, Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c.
Form dengan Checkbox
<html>
<body>
<form name=”input” action=”http://www.w3c.org/form_action.asp” method=”get”>Saya memiliki sebuah sepeda:<input type=”checkbox” name=”Sepeda” checked value=”ON”>
<br>
Saya memiliki sebuah mobil:
<input type=”checkbox” name=”Mobil” value=”ON”>
<br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Ketika Anda meng-klik tombol “Submit”, Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c.
Form dengan tombol radio
<html>
<body>
<form name=”input” action=”http://www.w3c.org/form_action.asp” method=”get”>
Pria:
<input type=”radio” name=”Sex” value=”Pria” checked>
<br>
Wanita:
<input type=”radio” name=”Sex” value=”Wanita”>
<br>
<input type =”submit” value =”Daftarkan sekarang!”>
</form>
</body>
</html>
Ketika Anda meng-klik tombol “Submit”, Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c.
Mengirim e-mail dari suatu form
<html>
<body>
<form action=”@” method=”post” enctype=”text/plain”>
<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
Nama<br>
<input type=”text” name=”nama”
value=”Nama Anda” size=”20″>
<br>
Mail:<br>
<input type=”text” name=”mail”
value=”Mail Anda” size=”20″>
<br>
Komentar:<br>
<input type=”text” name=”komentar”
value=”Komentar Anda” size=”40″>
<br><br>
<input type=”submit” value=”Send”>
<input type=”reset” value=”Reset”>
</form>
</body>
</html>
Sehat Tanpa Obat 