Belajar Html Membuat FORM

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&#8221; 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&#8221; 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&#8221; 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>

Tentang belalangtue

manusia biasa yang ingin terus belajar.............
Pos ini dipublikasikan di Computer, HTML, pemrograman, tutorial, web dan tag , , , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s