List dan Form HTML

List

Pada MS. Word, kita pasti sudah tahu dengan yang namanya Bullet and Numbering. List dalam HTML hampir sama dengan itu, yaitu ordered list (daftar yang urut) dan unordered list (daftar yang tak terurut).
Numbering pada MS. Word hampir sama dengan Ordered list sedangkan Bullet hampir sama dengan Unordered list.
*Ordered List
Tag yang digunakan untuk membuat Ordered List adalah <ol> dan setiap item yang didaftar berada dalam tag <li>.
Contoh:
<ol>
<li>Minggu</li>
<li>Senin</li>
<li>Selasa</li>
</ol>
Output:

1. Minggu
2. Senin
3. Selasa

*Unordered List
Tag yang dipakai adalah <ul> dan daftar item berada dalam tag <li>
Contoh:
<ul>
<li>Minggu</li>
<li>Senin</li>
<li>Selasa</li>
</ul>
Output:

• Minggu
• Senin
• Selasa

*Defined List
Dalam HTML, kita juga bisa membuat list dimana setiap item yang didaftar mempunyai penjelelasan atau diskripsi. List seperti ini disebut dengan Defined List.
Tag yang dipakai adalah <dl>, Item-item yang didaftar berada diantara tag <dt> dan </dt>.
Contoh:
<dl>
<dt>Minggu</dt> <dd>Adalah Hari libur </dd>
<dt>Senin</dt>  <dd>Waktunya upacara Bendera</dd>
</dl>
Output:

Minggu

Adalah Hari libur

Senin

Waktunya upacara Bendera

Item-item yang di daftar dalam list tidak hanya berupa teks, artinya kita bisa memasukkan tag-tag HTML lain, link, gambar, bahkan list lain (list dalam list). Selamat bereksperimen sendiri.

---

Form

Bila kita menginginkan pengunjung website kita untuk memasukkan data-data yang kemudian disimpan kedalam web server, kita bisa melakukannya dengan menggunakan Form HTML ini.
User dapat memasukkan data-data mereka dalam pilihan input, baik berupa kotak teks, cek list, Radio dan sebagainya..
Tag form adalah <form> dengan sintax nya sebagai berikut:
<form>
 tag-tag input
</form>

Selanjutnya mari kita bahas beberapa macam input yang penting dan sering digunakan dalam form HTML ini...
*Input Teks
Tag yang digunakan adalah : <input type="text"/>
Contoh:
<form>
Makanan     : <input type="text" name="food"/> </br>
Minuman    : <input type="text" name="drink"/>
</form>
Output:

Makanan  :

Minuman :

*Input Password (Kata sandi)
Tag yang digunakan:  <input type="password" />
Contoh:
<form>
Password : <input type="password" name="sandi" />
</form>
Output:

Password :

Apabila kita memasukkan kata dalam kotak password tersebut, secara otomatis teks akan ditampilkan sebagai bintang (*).

*Cek List
Cek list menunjukkan daftar pilihan dimana user bisa memilih lebih dari satu dari pilihan yang disajikan.
Tag yang digunakan : <input type="checkbox" />
Contoh:
<form>
<input type="checkbox" name="buah" value="Apel" /> Saya suka Apel<br />
<input type="checkbox" name="buah" value="Rambutan" /> Saya suka rambutan
</form>
Output:

Saya suka Apel

Saya suka rambutan

*Radio List
Radio list sama dengan cek list, hanya saja user hanya diperbolehkan memilih satu dari pilihan yang disajikan.
Tag yang digunakan adalah: <input type="radio" />
Contoh :
<form>
<input type="radio" name="makanan" value="Soto" /> Saya suka Soto<br />
<input type="radio" name="makanan" value="Bakso" /> Saya suka Bakso
</form>
Output:

Saya suka Soto

Saya suka Bakso

*Pilihan Drop down
Kita bisa membuat input berupa dropdown dengan menggunakan tag : <select>
Kemudian Item-itemnya ditulis diantara tag <option> dan </option>
Contoh:
<form action=""> <select name=buah> <option value=apel>Apel</option> <option value=semangka>Semangka</option> <option value=Jeruk selected=selected>Jeruk</option> <option value=durian>Durian</option> </select> </form>
Output:

Apel Semangka Jeruk Durian

*Tombol Submit
Tombol submit digunakan untuk mengirim data-data input yang telah dimasukkan oleh user.
Tag yang digunakan:    <input type="submit" />
Contoh :
<form name="input" action="formku.php" method="get">
Nama: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Output:

Nama:

Apabila user mengisi kotak tersebut kemudian menekan tombil Submit, maka data yang dimasukkan oleh user tersebut akan dikirimkan ke file yang bernama formku.php (tertulis pada atribut action) dan kemudian diolah oleh perintah-perintah program yang ditentukan. Pemrograman ini akan kita pelajari pada tutorial uang berbeda.

Inlink nav:
Prev Tut: Tabel HTML

Next tut: Frame dan Iframe HTML

Index Tutorial

Untuk mendownload atau melihat konten sepenuhnya, klik tombol download diatas kemudian stelah tab baru terbuka, tunggu 5 detik, setelah itu klik gambar (skip ad) di pojok kanan atas seperti dibawah:

;