Pada artikel ini saya akan membahas bagaimana membuat list di dalam list. Caranya sebenarnya mudah. Cukup membuat list seperti biasa, lalu masukkan lagi bentuk list kedalam list utamanya.
Oke, langsung saja.
-----------------mulai kode html----------------------
<ul>
<li>Konsol Video Game</li>
<ul>
<li>Playstation 2</li>
<li>Playstation 3</li>
<li>XBOX 360</li>
<li>Wii</li>
</ul>
</ul>
-----------------akhir kode html----------------------
Penjelasan:
++ kita lihat kode diatas. diawal kita membuat tag <ul> diikuti tag<li></li>. Lalu dibawah tag <li></li> kita tulis lagi tag <ul>,
<li></li> dan ditutup tag </ul>. Setelah itu ditutup lagi dengan tag </ul> dimana tag terakhir ini untuk menutup tag <ul> yang paling
awal.
++ Jadi yang terpenting disini adalah harus teliti untuk memasukkan tag list yang baru kedalam tag list utamanya.
Contoh lain:
-----------------mulai kode html----------------------
<ul>
<li>Mobil</li>
<ul>
<li>Jepang</li>
<ul>
<li>Toyota</li>
<li>Honda</li>
</ul>
<li>Korea</li>
<ul>
<li>KIA</li>
<li>Hyundai</li>
</ul>
</ul>
<li>Motor</li>
<ul>
<li>Jepang</li>
<ul>
<li>Yamaha</li>
<li>Honda</li>
<li>Suzuki</li>
</ul>
<li>Itali</li>
<ul>
<li>Ducatti</li>
<li>Aprilia</li>
</ul>
</ul>
</ul>
-----------------akhir kode html----------------------
Contoh-contoh di atas adalah untuk unordered list. Untuk membuat yang ordered list dan definition list caranya sama saja.
Read More...
Sabtu, 17 Juli 2010
Membuat list dengan HTML 1
Ada tiga bentuk dasar list di HTML. Pertama adalah unordered list, kedua ordered list dan ketiga definiton list. Langsung saja.
1. Unordered list.
Dibuka dengan tag <ul> ditutup dengan </ul>. Di antara tag <ul></ul> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
Atribut yang dapat kita tambahkan untuk tag <ul> adalah 'type'. Dan nilai yang dapat diisi ke atribut 'type' adalah 'disc', 'circle' dan 'square'. Sementara untuk tag <li> atributnya juga sama.
Contoh:
-----------------mulai kode html----------------------
<ul type="square">
<li>List Pertama</li>
<li>List Kedua</li>
<li type="circle">List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
2. Ordered list.
Dibuka dengan tag <ol> ditutup dengan </ol>. Di antara tag <ol></ol> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ol>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
Atribut yang dapat ditambahkan untuk tag <ol> adalah:
++ atribut 'type' yang dapat diisi dengan nilai 'a' untuk huruf kecil, 'A' untuk huruf besar, 'i' untuk romawi kecil, 'I' untuk romawi besar dan '1' untuk angka.
++ atribut 'start' yang diisi dengan karakter yang sesuai dengan nilai di atribut 'type' untuk menentukan karakter awal list. Jika ingin awal nomor list adalah angka 3 maka masukkan nilai '3'. Atau jika ingin awal angka list adalah huruf D, maka masukkan nilai '4'.
Contoh:
-----------------mulai kode html----------------------
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="A" start="F">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
3. Definiton list.
Dibuka dengan tag <dl> ditutup dengan </dl>, diantaranya diisi tag <dt></dt> atau <dd></dd>. Diantara tag <dt></dt> atau <dd></dd> diisi kalimat yang diinginkan. tag <dt></dt> dan <dd></dd> adalah bagian dari tag <dl></dl>. Tag <dd></dd> sebenarnya adalah definisi dari tag <dt></dt>. Karena itu tag <dd></dd> secara default lebih mengindent masuk dibandingkan <dt></dt>. Tidak ada atribut yang dapat ditambahkan ke tag list ini.
Oya, tag <dt></dt> atau <dd></dd> bisa dua-duanya ada diantara tag <dl></dl> atau salah satunya saja.
Contoh:
-----------------mulai kode html----------------------
<dl>
<dt>Bapak</dt>
<dd>Panggilan untuk orang tua laki-laki</dd>
<dt>Ibu</dt>
<dd>Panggilan untuk orang tua perempuan</dd>
</dl>
<dl>
<dt>tag dt saja</dt>
</dl>
<dl>
<dd>tag dd saja</dd>
</dl>
-----------------akhir kode html----------------------
Gimana? Masih bingung? Berikut adalah contoh lengkap nya, mudah-mudahan tidak bingung lagi.
-----------------mulai kode html----------------------
<html>
<head>
<title>membuat list</title>
</head>
<body>
contoh unorderd list:
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
<ul type="square">
<li>List Pertama dengan bullet square</li>
<li>List Kedua dengan bullet square</li>
<li type="circle">List Ketiga dengan bullet circle</li>
</ul>
<hr>
contoh ordered list huruf besar:
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf besar dengan huruf awal F:
<ol type="A" start="6">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf kecil:
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi kecil:
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi besar:
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka:
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka dimulai dengan angka 4:
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh definiton list:
<dl>
<dt>Kiryu Kazuma</dt>
<dd>Karakter utama dalam serial video game Yakuza</dd>
<dt>Rikimaru</dt>
<dd>Karakter utama dalam serial video game Tenchu</dd>
</dl>
<hr>
contoh definiton list tanpa tag <dd></dd>:
<dl>
<dt>Kiryu Kazuma</dt>
</dl>
<hr>
contoh definiton list tanpa tag <dt></dt>:
<dl>
<dd>Karakter utama dalam serial video game Yakuza</dd>
</dl>
</body>
</html>
-----------------akhir kode html----------------------
save dengan nama -misal- 'latihan-list.html'. Coba buka dengan browser dan lihat hasilnya.
Sampai jumpa di artikel berikutnya yaitu Membuat list dengan HTML 2, dimana saya akan memberikan contoh bagaimana membuat list didalam list.
Insya Allah..... Read More...
1. Unordered list.
Dibuka dengan tag <ul> ditutup dengan </ul>. Di antara tag <ul></ul> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
Atribut yang dapat kita tambahkan untuk tag <ul> adalah 'type'. Dan nilai yang dapat diisi ke atribut 'type' adalah 'disc', 'circle' dan 'square'. Sementara untuk tag <li> atributnya juga sama.
Contoh:
-----------------mulai kode html----------------------
<ul type="square">
<li>List Pertama</li>
<li>List Kedua</li>
<li type="circle">List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
2. Ordered list.
Dibuka dengan tag <ol> ditutup dengan </ol>. Di antara tag <ol></ol> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ol>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
Atribut yang dapat ditambahkan untuk tag <ol> adalah:
++ atribut 'type' yang dapat diisi dengan nilai 'a' untuk huruf kecil, 'A' untuk huruf besar, 'i' untuk romawi kecil, 'I' untuk romawi besar dan '1' untuk angka.
++ atribut 'start' yang diisi dengan karakter yang sesuai dengan nilai di atribut 'type' untuk menentukan karakter awal list. Jika ingin awal nomor list adalah angka 3 maka masukkan nilai '3'. Atau jika ingin awal angka list adalah huruf D, maka masukkan nilai '4'.
Contoh:
-----------------mulai kode html----------------------
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="A" start="F">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
3. Definiton list.
Dibuka dengan tag <dl> ditutup dengan </dl>, diantaranya diisi tag <dt></dt> atau <dd></dd>. Diantara tag <dt></dt> atau <dd></dd> diisi kalimat yang diinginkan. tag <dt></dt> dan <dd></dd> adalah bagian dari tag <dl></dl>. Tag <dd></dd> sebenarnya adalah definisi dari tag <dt></dt>. Karena itu tag <dd></dd> secara default lebih mengindent masuk dibandingkan <dt></dt>. Tidak ada atribut yang dapat ditambahkan ke tag list ini.
Oya, tag <dt></dt> atau <dd></dd> bisa dua-duanya ada diantara tag <dl></dl> atau salah satunya saja.
Contoh:
-----------------mulai kode html----------------------
<dl>
<dt>Bapak</dt>
<dd>Panggilan untuk orang tua laki-laki</dd>
<dt>Ibu</dt>
<dd>Panggilan untuk orang tua perempuan</dd>
</dl>
<dl>
<dt>tag dt saja</dt>
</dl>
<dl>
<dd>tag dd saja</dd>
</dl>
-----------------akhir kode html----------------------
Gimana? Masih bingung? Berikut adalah contoh lengkap nya, mudah-mudahan tidak bingung lagi.
-----------------mulai kode html----------------------
<html>
<head>
<title>membuat list</title>
</head>
<body>
contoh unorderd list:
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
<ul type="square">
<li>List Pertama dengan bullet square</li>
<li>List Kedua dengan bullet square</li>
<li type="circle">List Ketiga dengan bullet circle</li>
</ul>
<hr>
contoh ordered list huruf besar:
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf besar dengan huruf awal F:
<ol type="A" start="6">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf kecil:
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi kecil:
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi besar:
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka:
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka dimulai dengan angka 4:
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh definiton list:
<dl>
<dt>Kiryu Kazuma</dt>
<dd>Karakter utama dalam serial video game Yakuza</dd>
<dt>Rikimaru</dt>
<dd>Karakter utama dalam serial video game Tenchu</dd>
</dl>
<hr>
contoh definiton list tanpa tag <dd></dd>:
<dl>
<dt>Kiryu Kazuma</dt>
</dl>
<hr>
contoh definiton list tanpa tag <dt></dt>:
<dl>
<dd>Karakter utama dalam serial video game Yakuza</dd>
</dl>
</body>
</html>
-----------------akhir kode html----------------------
save dengan nama -misal- 'latihan-list.html'. Coba buka dengan browser dan lihat hasilnya.
Sampai jumpa di artikel berikutnya yaitu Membuat list dengan HTML 2, dimana saya akan memberikan contoh bagaimana membuat list didalam list.
Insya Allah..... Read More...
Membuat form dengan HTML 3
Berikut adalah contoh lengkap kode HTML tentang form.
-----------------mulai kode html----------------------
<html><head><title>a</title></head>
<body>
<form method="post" action="proses.php">
Username: <input type="text" name="username" maxlength="20" size="20"> <br>
Password: <input type="password" name="password" maxlength="20" size="20"> <br>
Nama: <input type="text" name="nama" maxlength="20" size="20"> <br>
Kota: <select name="kota" size="1">
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
</select>
Alamat: <textarea name="keterangan" cols="50" rows="5"></textarea> <br>
Gender: Laki-laki <input type="radio" name="gender" value="L"> | Perempuan <input type="radio" name="gender" value="P">
<br> Musik favorit: Pop <input type="checkbox" name="musik" value="Pop" checked> | Rock <input type="checkbox" name="musik" value="Rock"> | Jazz <input type="checkbox" name="musik" value="Jazz"> <br>
Film Favorit: Aksi <input type="checkbox" name="film" value="Aksi" checked> | Drama <input type="checkbox" name="film" value="Drama"> | Komedi <input type="checkbox" name="film" value="komedi"> <br>
<input type="reset" value="Reset"> | <input type="submit" value="OK"> </form>
</body></html>
-----------------akhir kode html----------------------
Coba anda kopi kode di atas dan anda lihat hasilnya. Oya, jangan di klik dulu tombol OK nya ya. Kalau mau di klik sih.. ya terserah.... Kenapa? Karena kita belum membuat halaman untuk memproses form nya. Bagaimana membuatnya? Sabar ya... Nanti akan saya buatkan artikel tentang memproses form menggunakan php.
Oke sekian dulu tentang form. Sampai jumpa... Read More...
-----------------mulai kode html----------------------
<html><head><title>a</title></head>
<body>
<form method="post" action="proses.php">
Username: <input type="text" name="username" maxlength="20" size="20"> <br>
Password: <input type="password" name="password" maxlength="20" size="20"> <br>
Nama: <input type="text" name="nama" maxlength="20" size="20"> <br>
Kota: <select name="kota" size="1">
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
</select>
Alamat: <textarea name="keterangan" cols="50" rows="5"></textarea> <br>
Gender: Laki-laki <input type="radio" name="gender" value="L"> | Perempuan <input type="radio" name="gender" value="P">
<br> Musik favorit: Pop <input type="checkbox" name="musik" value="Pop" checked> | Rock <input type="checkbox" name="musik" value="Rock"> | Jazz <input type="checkbox" name="musik" value="Jazz"> <br>
Film Favorit: Aksi <input type="checkbox" name="film" value="Aksi" checked> | Drama <input type="checkbox" name="film" value="Drama"> | Komedi <input type="checkbox" name="film" value="komedi"> <br>
<input type="reset" value="Reset"> | <input type="submit" value="OK"> </form>
</body></html>
-----------------akhir kode html----------------------
Coba anda kopi kode di atas dan anda lihat hasilnya. Oya, jangan di klik dulu tombol OK nya ya. Kalau mau di klik sih.. ya terserah.... Kenapa? Karena kita belum membuat halaman untuk memproses form nya. Bagaimana membuatnya? Sabar ya... Nanti akan saya buatkan artikel tentang memproses form menggunakan php.
Oke sekian dulu tentang form. Sampai jumpa... Read More...
Membuat form dengan HTML 2
oke sekarang kita akan melanjutkan artikel "membuat form dengan html 1".
5. radio button
merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.
-----------------mulai kode html----------------------
<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">
<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'radio'.
++ untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau lebih radio button. Dalam contoh di atas, terdapat dua kelompok radio button, yaitu 'pilihan' dan 'pilihan2'.
++ atribut 'value' diisi nilai yang akan diproses nanti.
++ atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).
Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu di pilhan kedua 'BMW". Berikut kodenya.
-----------------mulai kode html----------------------
Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">
<br><br>
Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">
-----------------akhir kode html----------------------
Jadi teks yang Audi, BMW, Honda, Yamaha itulah yang akan ditampilkan di browser. Sedangkan teks yang berada di dalam 'value' itulah nilai yang akan diproses.
6. checkbox
merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).
-----------------mulai kode html----------------------
<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">
<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">
-----------------akhir kode html----------------------
keterangan:
++ sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.
7. tombol reset
tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.
-----------------mulai kode html----------------------
<input type="reset" value="Batal">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'reset'.
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
8. tombol submit
tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang ditulis pada atribut 'action' (lihat artikel Membuat form dengan HTML 1).
-----------------mulai kode html----------------------
<input type="submit" value="Kirim">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'submit'
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
Jika anda masih bingung silahkan lihat artikel Membuat form dengan HTML 3 untuk contoh lengkap form. Read More...
5. radio button
merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.
-----------------mulai kode html----------------------
<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">
<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'radio'.
++ untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau lebih radio button. Dalam contoh di atas, terdapat dua kelompok radio button, yaitu 'pilihan' dan 'pilihan2'.
++ atribut 'value' diisi nilai yang akan diproses nanti.
++ atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).
Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu di pilhan kedua 'BMW". Berikut kodenya.
-----------------mulai kode html----------------------
Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">
<br><br>
Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">
-----------------akhir kode html----------------------
Jadi teks yang Audi, BMW, Honda, Yamaha itulah yang akan ditampilkan di browser. Sedangkan teks yang berada di dalam 'value' itulah nilai yang akan diproses.
6. checkbox
merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).
-----------------mulai kode html----------------------
<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">
<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">
-----------------akhir kode html----------------------
keterangan:
++ sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.
7. tombol reset
tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.
-----------------mulai kode html----------------------
<input type="reset" value="Batal">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'reset'.
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
8. tombol submit
tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang ditulis pada atribut 'action' (lihat artikel Membuat form dengan HTML 1).
-----------------mulai kode html----------------------
<input type="submit" value="Kirim">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'submit'
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
Jika anda masih bingung silahkan lihat artikel Membuat form dengan HTML 3 untuk contoh lengkap form. Read More...
Membuat form dengan HTML 1
Jika anda ingin membuat semacam daftar isian (form) di situs web anda, artikel ini akan membahas bagaimana cara membuatnya. Tapi artikel ini hanya akan membuat form nya saja. Untuk memproses data yang diinput dari form, tidak akan dibahas disini.
Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.
-----------------mulai kode html----------------------
<form method="???" action="???">
<tag tertentu>
</form>
-----------------akhir kode html----------------------
pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika anda mengisi 'get' maka data akan terlihat di address bar web browser.
atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"
Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset data.
1. Textfield.
Berikut adalah kode HTML untuk membuat textfield.
-----------------mulai kode html----------------------
<input type="text" name="judul" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form berbentuk textfield. atribut ini harus ada untuk membuat textfield.
++ atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
++ atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan, dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
2. Textarea.
Berikut adalah kode HTML untuk membuat Textarea.
-----------------mulai kode html----------------------
<textarea name="keterangan" cols="50" rows="5"></textarea>
-----------------akhir kode html----------------------
penjelasan:
++ atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini dapat dihilangkan.
++ atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan. Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.
3. Password
-----------------mulai kode html----------------------
<input type="password" name="katasandi" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ sama seperti textfield hanya saja atribut 'type' diisi dengan nilai 'password'. Karakter yang diinput akan tidak terlihat diganti dengan simbol lingkaran atau asterisk (*).
4. dropdown box.
-----------------mulai kode html----------------------
<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b" selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah orangnya!</option></select>
-----------------akhir kode html----------------------
penjelasan:
++ tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1' atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka sebanyak angka tersebut pilihan akan ditampilkan.
++ tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat diantara tag <option> </option> adalah kalimat yang akan ditampilkan ke browser.++ atribut 'selected' dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat dipakai pada satu option saja.
Oke, sampai sini dulu. Pada artikel selanjutnya akan membahas radio button, checkbox dan tombol submit dan reset. Ciaoo!!! Read More...
Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.
-----------------mulai kode html----------------------
<form method="???" action="???">
<tag tertentu>
</form>
-----------------akhir kode html----------------------
pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika anda mengisi 'get' maka data akan terlihat di address bar web browser.
atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"
Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset data.
1. Textfield.
Berikut adalah kode HTML untuk membuat textfield.
-----------------mulai kode html----------------------
<input type="text" name="judul" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form berbentuk textfield. atribut ini harus ada untuk membuat textfield.
++ atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
++ atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan, dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
2. Textarea.
Berikut adalah kode HTML untuk membuat Textarea.
-----------------mulai kode html----------------------
<textarea name="keterangan" cols="50" rows="5"></textarea>
-----------------akhir kode html----------------------
penjelasan:
++ atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini dapat dihilangkan.
++ atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan. Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.
3. Password
-----------------mulai kode html----------------------
<input type="password" name="katasandi" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ sama seperti textfield hanya saja atribut 'type' diisi dengan nilai 'password'. Karakter yang diinput akan tidak terlihat diganti dengan simbol lingkaran atau asterisk (*).
4. dropdown box.
-----------------mulai kode html----------------------
<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b" selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah orangnya!</option></select>
-----------------akhir kode html----------------------
penjelasan:
++ tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1' atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka sebanyak angka tersebut pilihan akan ditampilkan.
++ tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat diantara tag <option> </option> adalah kalimat yang akan ditampilkan ke browser.++ atribut 'selected' dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat dipakai pada satu option saja.
Oke, sampai sini dulu. Pada artikel selanjutnya akan membahas radio button, checkbox dan tombol submit dan reset. Ciaoo!!! Read More...
Langganan:
Postingan (Atom)
