HTML5 #4 : Mengenal Penggunaan List, Tabel dan Form pada HTML

ProgramMutiah RiskyLeave a comment

1. List

Daftar/list biasanya dapat dibuat dengan menggunakan penomoran terurut menggunakan  angka,abjad atau hanya sekedar menggunakan simbol tanpa urutan.  Didalam HTML sendiri list memiliki beberapa jenis penulisan sebagai berikut.

a. Ordered List

Ordered List  atau dalam bahasa indonesia disebut daftar berurutan. Tipe list ini digunakan untuk membuat sebuah format penulisan yang membutuhkan pengurutan.

Tag yang digunakan untuk Ordered List ini yaitu

<ol> </ol> (singkatan dari ordered list).

Dimana pada setiap listnya digunakan tag list <li>

Contoh penggunaan :

<h3> Daftar Pemenang Lomba Hackathon </h3>
<ol>
	<li> Kania Hudayani </li>
	<li> Hani Anandhita </li>
	<li> Dina Oktaviani </li>
</ol>

        Dengan membuat struktur penulisan seperti diatas maka penomoran daftar akan dibuat secara otomatis. Lihat hasil output dan source code dari contoh diatas :

Output
b. Unordered List

Merupakan jenis list tanpa urutan dan biasanya digunakan simbol sebagai penanda list.

Tag yang digunakan untuk Unordered List ini yaitu,

<ul> </ul> (singkatan dari unordered list). Dimana pada setiap listnya digunakan tag list <li>

Contoh penggunaan :

<h3> Daftar belanjaan </h3>
<ul>
	<li> Piring </li>
	<li> Penggaris </li>
	<li> Sapu </li>
</ul>

       List/daftar akan ditandai dengan simbol lingkaran. Lihat hasil output dan source code dari contoh diatas :

Source Code
Output
c. Definition List

Definition list ini biasanya digunakan dalam membuat daftar istilah beserta definisinya seperti kamus.

Tag Definition List

<dl> 

<dt></dt>

    <dd></dd>

</dl>

<dt></dt>  : (definition term, digunakan untuk menampung istilah yang didefinisikan)

<dd></dd> : untuk menjelaskan definisi dari tag <dt> sebelumnya.

Contoh penggunaan

Source Code
Output
d. Nested List (Daftar Bersarang)

Nested list biasanya digunakan pada sebuah list bercabang/bersarang.

Contoh penggunaan :

Source Code
Output

2. Table

Biasanya digunakan untuk menampilkan tipe tabel dalam HTML

Tag Table :

<table></table>

Untuk membuat baris maka digunakan tag <tr></tr> (singkatan dari table row). Sedangkan untuk membuat kolom dalam table maka digunakan tag <td></td> (singkatan dari table data).

Contoh penggunaan table

Source Code
Output

3. Form

biasanya digunakan untuk input data layaknya sebuah formulir.

tag form :

<form>…</form>

a. Kontrol Form

Pada umumnya kontrol form yang digunakan adalah tag <input>. Namun sebenarnya ada banyak tipe kontrol yang dapat digunakan dan di sesuaikan dengan kebutuhan.

b. label

label digunakan untuk memberi judul dari input yang harus dimasukkan.

Tag label :

<label>..</label>

Contoh penggunaan

Source Code
Output
c. combo box

biasanya digunakan untuk mebuat input berupa list pilihan

Tag combo box

<select>

  <option>..</option> 

<option>..</option> 

</select>

Contoh penggunaan

Source Code
Output
d. Input

Tag input merupakan tag yang paling sering digunakan dalam membuat form. Ada beberapa jenis tipe input yaitu :

  • Text

Biasanya digunakan untuk membuat input dengan tipe teks/abjad

Contoh :

<input type=”text” name=”nama”/>

Output

Submit / button biasanya berupa tombol yang dapat di klik yang digunakan untuk mengirimkan atrivut value dalam satu form.

  • Submit

Contoh penulisan input tipe submit :

<input type=”submit” value=”Kirim”>

Output
  • Number

biasanya digunakan untuk membuat input yang memiliki nilai berupa angka. Sehingga dapat mencegah user memasukkan data selain angka.

Contoh :

<input type=”number” value=”Kirim”>

  • Date

biasanya digunakan untuk input yang berupa tanggal.

Contoh input tipe date

<input type=”date” name=”tgl lahir”/>

  • Dan masih banyak lagi tipe input yang lainnya seperti datetime, time, ..

yang memiliki kegunaan masing-masing.

Contoh form

<form action="">
    <h3>Formulir Pendaftaran</h3>
        <label for="nama">Nama</label> 
        <input type="text" name="nama"/> 
        <br>
        <label for="umur">Umur</label> 
        <input type="number" name="umur"/> 
        <br>
        <label for="tgl lahir">Tanggal Lahir</label> 
        <input type="" name="tgl lahir"/> 
        <br>
        <select name="matakuliah">  
            <option>Pemrograman Web</option>  
            <option>Struktur Data</option>  
            <option>Kecerdasan Buatan</option> 
        </select>
        <br>
        <input type="submit" value="Kirim">
</form>
output

Sekian. Jika ada pertanyaan silahkan tinggalkan di kolom komentar.

Leave a Reply