Cara membuat berbagai jenis list dalam HTML

Cara membuat berbagai jenis list dalam HTML

Daftar HTML

Daftar HTML yang digunakan untuk menyajikan daftar informasi terbentuk dengan baik dan semantik cara. Ada tiga jenis list dalam HTML dan masing-masing memiliki tujuan tertentu dan makna.

Unordered list Digunakan untuk membuat daftar item terkait, tidak dalam urutan tertentu.

Ordered list Digunakan untuk membuat daftar item terkait, dalam urutan tertentu.

Keterangan list Digunakan untuk membuat daftar istilah dan deskripsi mereka.

Catatan :

Dalam daftar item yang anda dapat menempatkan teks, gambar, link, jeda baris, dll. Anda juga dapat menempatkan seluruh daftar dalam daftar item untuk membuat daftar bersarang.

Pada bagian berikut kita akan mencakup semua tiga jenis daftar satu per satu:

HTML Daftar Unordered

Daftar unordered dibuat dengan menggunakan <ul> elemen, dan setiap item daftar dimulai dengan <li> elemen.

Daftar item dalam daftar unordered ditandai dengan peluru. Berikut ini sebuah contoh:

<ul>

    <li>Chocolate Cake</li>

    <li>Black Forest Cake</li>

    <li>Pineapple Cake</li>

</ul>

— Output dari contoh di atas akan terlihat seperti ini:

• Chocolate Cake
• Black Forest Cake
• Pineapple Cake

Anda juga dapat mengubah jenis peluru dalam unordered list menggunakan CSS list-style-type properti. Berikut gaya perubahan aturan jenis peluru dari default disk untuk square:

ul {

    list-style-type: square;

}

HTML Memerintahkan Daftar

Daftar memerintahkan dibuat dengan menggunakan <ol> elemen, dan setiap item daftar dimulai dengan <li> elemen. Daftar urutan yang digunakan saat order dari daftar barang-barang penting.

Daftar item dalam daftar memerintahkan ditandai dengan angka. Berikut ini sebuah contoh:

<ol>

    <li>Fasten your seatbelt</li>

    <li>Starts the car's engine</li>

    <li>Look around and go</li>

</ol>

— Output dari contoh di atas akan terlihat seperti ini:

1. Fasten your seatbelt
2. Starts the car's engine
3. Look around and go

Penomoran item dalam daftar memerintahkan biasanya dimulai dengan 1. Namun, jika anda ingin mengubah bahwa anda dapat menggunakan start atribut, seperti yang ditunjukkan dalam contoh berikut:

<ol start="10">

    <li>Mix ingredients</li>

    <li>Bake in oven for an hour</li>

    <li>Allow to stand for ten minutes</li>

</ol>

— Output dari contoh di atas akan terlihat seperti ini:

10. Mix ingredients
11. Bake in oven for an hour
12. Allow to stand for ten minutes

Seperti unordered list, anda juga dapat menggunakan CSS list-style-type properti untuk mengubah jenis nomor dalam daftar memerintahkan. Berikut gaya perubahan aturan jenis penanda untuk angka romawi.

ol {

    list-style-type: upper-roman;

}

Anda juga dapat menggunakan type atribut untuk mengubah penomoran jenis misalnya type="I". Namun, anda harus menghindari atribut ini, gunakan CSS list-style-type properti bukan.

Deskripsi HTML Daftar

Deskripsi adalah daftar item dengan deskripsi atau definisi dari masing-masing item.

Deskripsi daftar ini dibuat dengan menggunakan <dl> elemen. Dalam <dl> unsur ini digunakan dalam hubungannya dengan <dt> elemen yang menentukan jangka waktu, dan <dd> elemen yang menentukan istilah definisi.

Browser biasanya membuat definisi daftar dengan menempatkan istilah dan definisi dalam baris yang terpisah, di mana istilah ini definisi yang sedikit menjorok ke dalam. Berikut ini sebuah contoh:

<dl>

    <dt>Bread</dt>

    <dd>A baked food made of flour.</dd>

    <dt>Coffee</dt>

    <dd>A drink made from roasted coffee beans.</dd>

</dl>

— Output dari contoh di atas akan terlihat seperti ini:

Bread

A baked food made of flour.

Coffee

A drink made from roasted coffee beans.

Apa Bentuk HTML Bentuk HTML yang diperlukan untuk mengumpulkan berbagai jenis input pengguna, seperti rincian kontak seperti nama, alamat email, nomor telepon, atau rincian seperti informasi kartu kredit, dll.

Bentuk-bentuk yang mengandung unsur-unsur khusus yang disebut kontrol seperti inputbox, checkbox, radio-tombol, tombol submit, dll. Pengguna umumnya lengkapi formulir dengan memodifikasi kontrol misalnya memasukkan teks, memilih barang, dll. dan mengirimkan formulir tersebut ke web server untuk diproses lebih lanjut.

Dengan tag ini digunakan untuk membuat sebuah form HTML. Berikut ini adalah contoh sederhana dari form login:

<form>

    <label>Username: <input type="text"></label>

    <label>Password: <input type="password"></label>

    <input type="submit" value="Submit">

</form>

Hasilnya seperti di bawah ini :

Username: Password:

Bagian berikut ini menjelaskan berbagai jenis kontrol yang dapat anda gunakan pada formulir anda.

Elemen Input
Ini adalah yang paling umum digunakan elemen dalam bentuk HTML.

Hal ini memungkinkan anda untuk menentukan berbagai jenis bidang masukan pengguna, tergantung pada type atribut. Elemen input dapat dari jenis text field, field password, checkbox, radio button, submit, tombol reset, file pilih kotak, serta beberapa jenis masukan baru diperkenalkan pada HTML5.

Yang paling sering digunakan jenis input yang dijelaskan di bawah ini.

Bidang Teks
Teks satu baris tempat yang memungkinkan pengguna untuk input teks.

Single-line text input kontrol yang dibuat menggunakan <input> elemen, dan type atribut memiliki nilai text. Berikut ini adalah contoh dari single-line input teks yang digunakan untuk mengambil username:

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

Username:

Catatan :
The <label> tag ini digunakan untuk mendefinisikan label untuk <input> unsur-unsur. Jika anda ingin pengguna anda untuk memasukkan beberapa baris yang harus anda gunakan <textarea> sebagai gantinya.

Bidang Sandi
Bidang sandi yang mirip dengan text field. Satu-satunya perbedaan adalah; karakter di bidang kata sandi yang bertopeng, yaitu mereka yang ditampilkan sebagai tanda titik. Hal ini untuk mencegah orang lain dari membaca password pada layar. Ini juga merupakan satu-baris teks input kontrol yang dibuat menggunakan <input> elemen dan type atribut yang memiliki nilai password.

Berikut ini adalah contoh dari single-baris masukan password yang digunakan untuk mengambil password user:

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Password:

Tombol Radio
Tombol Radio digunakan untuk membiarkan pengguna memilih dengan tepat salah satu pilihan dari pra-didefinisikan set pilihan. Hal ini dibuat dengan menggunakan <input> elemen dan type atribut yang memiliki nilai radio.

Berikut ini adalah contoh dari tombol radio yang dapat digunakan untuk mengumpulkan gender pengguna informasi:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Male Female

Centang
Centang yang memungkinkan pengguna untuk memilih satu atau lebih pilihan dari pra-didefinisikan set pilihan. Hal ini dibuat dengan menggunakan <input> elemen dan type atribut yang memiliki nilai checkbox.

Berikut ini adalah contoh kotak centang yang dapat digunakan untuk mengumpulkan informasi tentang pengguna hobi:

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Soccer Cricket Baseball

Catatan :
Jika anda ingin membuat tombol radio atau kotak centang dipilih secara default, anda dapat menambahkan atribut checked untuk elemen input, seperti <input type="checkbox" checked>.

File Pilih kotak
File field memungkinkan pengguna untuk mengakses file lokal dan mengirimkannya sebagai lampiran dengan data formulir. Web browser seperti Google Chrome dan Firefox membuat file pilih kolom input dengan tombol Browse yang memungkinkan pengguna untuk menavigasi lokal hard drive dan pilih file.

Ini juga dibuat dengan menggunakan sebuah <input> elemen, dan type atribut nilai diatur ke file.

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Upload:

Textarea Textarea

Textarea Textarea adalah multi-line text kontrol input yang memungkinkan pengguna untuk memasukkan lebih dari satu baris teks. Multi-line text input kontrol yang dibuat menggunakan elemen

<form>

    <label for="address">Address:</label>

    <textarea rows="3" cols="30" name="address" id="address"></textarea>

</form>

— Output dari contoh di atas akan terlihat seperti ini:

Address:

Pilih Kotak
Pilih kotak dropdown daftar pilihan yang memungkinkan pengguna untuk memilih satu atau lebih pilihan dari daftar tarik-turun dari pilihan. Pilih kotak yang dibuat dengan menggunakan <select> elemen dan <option> elemen.

Satu <option> elemen dalam <select> elemen mendefinisikan masing-masing item daftar.

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

City: Sydney Melbourne Cromwell

Submit dan Tombol Reset
Tombol submit digunakan untuk mengirim data formulir ke server web. Ketika tombol submit diklik bentuk data dikirim ke file yang ditentukan dalam bentuk action atribut untuk memproses data yang dikirimkan.

Tombol reset ulang semua bentuk kontrol ke nilai default. Cobalah contoh berikut dengan mengetik nama anda di kolom teks, dan klik pada tombol submit untuk melihatnya dalam tindakan.

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

— Output dari contoh di atas akan terlihat seperti ini:

First Name:

Ketik nama anda pada kolom teks di atas, dan klik pada tombol submit untuk melihatnya dalam tindakan.

Catatan :
Anda juga dapat membuat tombol menggunakan <button> elemen. Tombol yang dibuat dengan <button> elemen fungsi seperti tombol yang dibuat dengan elemen input, tetapi mereka menawarkan lebih kaya render kemungkinan dengan memungkinkan embedding dari elemen HTML lainnya.

Pengelompokan Bentuk Kontrol
Anda juga kelompok logis terkait kontrol dan label dalam web form menggunakan <legend> elemen. Pengelompokan bentuk kontrol ke kategori yang membuatnya lebih mudah bagi pengguna untuk menemukan kontrol yang membuat bentuk yang lebih user-friendly. Mari kita coba contoh berikut untuk melihat cara kerjanya:

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label>Email Address: <input type="email" name="email"></label>
        <label>Phone Number: <input type="text" name="phone"></label>
    </fieldset>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Contact Details

Email Address: Phone Number:

Sering Digunakan Bentuk Atribut Daftar tabel berikut mencantumkan paling sering digunakan bentuk elemen atribut:

Atribut Deskripsi

1. Name : Menentukan nama form.

2. Action : Menentukan URL dari program atau script pada web server yang akan digunakan untuk pengolahan informasi yang disampaikan melalui form.

3. Method : Menentukan metode HTTP yang digunakan untuk mengirimkan data ke server web oleh browser. Nilai dapat berupa get (default) dan post.

4. Target : Menentukan di mana untuk menampilkan respon yang diterima setelah mengirimkan formulir. Nilai yang mungkin adalah _blank, _self, _parent dan _top.

5. Enctype : Menentukan bagaimana bentuk data harus dikodekan ketika mengirimkan formulir ke server. Berlaku hanya ketika nilai method atribut post.

Ada beberapa atribut lainnya, untuk tahu tentang mereka silahkan lihat <form> tag referensi.

Catatan :

Kode name atribut merupakan nama form dalam bentuk koleksi. Nilainya harus unik di antara bentuk-bentuk dalam sebuah dokumen, dan tidak harus menjadi string kosong.