Melanjut dari tutorial sebelumnya, pada tulisan kali ini masih membahas seputar fungsi Tag pada codingan HTML, langsung saja kita mulai dari Form.
A. Tag <form>...</form>
Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan
yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag
<input> dan <textarea>.
Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan
jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang
akan memproses data yang ada diantara tag <form>...</form>.
Untuk lebih jelasnya lihatlah cuplikan script di bawah ini.
__________________________________________________________________________________
<form action="coba.php" method="post">
......................................
ISI
......................................
</form>
__________________________________________________________________________________
Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus mempunyai
data didalamnya untuk itulah digunakan tag-tag lain. Tag yang sering digunakan adalah.
B. Tag <input>
Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari
atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox,
radio button dan sebagainya.
Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik
kode di bawah ini.
__________________________________________________________________________________
<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<form action="coba.php" method="post">
<p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16" maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer
yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="password"</b><br>
<input type="password" name="password_ku" size="16" maxlength="20"<br>
Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="radio"</b><br>
<input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.</b></p>
<p><b>Tag input dengan atribut type="checkbox"</b><br>
<input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama
<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>
<p><b>Tag input dengan atribut type="submit"</b><br>
<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))</p>
<p><b>Tag input dengan atribut type="reset"</b><br>
<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>
<p><b>Tag input dengan atribut type="hidden"</b><br>
<input type="hidden" value="data_ku" name="data">
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.</p>
<p><b>Tag input dengan propeti type="image"</b><br>
<input type="image" src="letak_file_gambar_anda" height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p>
</form></font>
</body>
</html>
__________________________________________________________________________________
Simpan dengan nama tag_form_input.html dan jalankan. Hasilnya akan seperti yang terlihat
pada gambar 2.4.
C. Tag <select>...</select> dan <option>
Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama
dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus
menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama
dengan tag radio hanya saja tag select lebih singkat.
Ketik coding seperti berikut
__________________________________________________________________________________
<html>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>
<p><b>Penggunaan select dan dan option</b></p>
<p>Daftar kategori silahkan pilih kategori</p>
<form action="coba.php" method="post">
Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1
<option value="Kategori 2">Kategori 2
<option value="Kategori 3">Kategori 3
</select>
<p><input type="submit" value="KIRIM"></p>
</form>
</body>
</html>
__________________________________________________________________________________
Simpan dengan nama tag_form_select.html lalu jalankan pada browser. Ingat agar Save as
type nya adalah HTML Document.
No comments:
Post a Comment