Pada artikel ini, kita akan belajar tentang atribut-atribut tag.
Sebelumnya kita telah sedikit menyinggung apa itu atribut.
Dan untuk lebih jelasnya mengenai atribut kita akan bahas pada tutorial kali ini.
Apa itu atribut?
Atribut adalah informasi tambahan yang disisipkan pada tag pembuka. Fungsinya adalah untuk memodifikasi perilaku dan ciri dari sebuah elemen.
Sebuah tag dapat memiliki banyak atribut atau tidak sama sekali. Namun ada beberapa tag yang mengharuskan memiliki atribut tertentu seperti tag <a> dengan atribut href dan tag <img> dengan atribut src.
Jenis-jenis atribut
Atribut terbagi menjadi beberapa kategori sesuai, fungsi dan sifatnya. Ada yang general, khusus dan event.
Baik kitu mulai dari,
Atribut general
Atribut general atau atribut umum adalah atribut yang bisa ditambahkan pada semua tag
| Atribut | Keterangan |
|---|---|
| id | Untuk memberikan identitas unik pada elemen |
| class | Digunakan untuk membuat class css |
| style | Digunakan untuk membuat inline css |
| accesskey | Digunakan sebagai shortcut fokus elemen |
| hidden | Digunakan untuk menyembunyikan elemen |
| contenteditable | Digunakan untuk mengatur apakah isi elemen dapat di edit |
| data-* | Digunakan untuk menyimpan data |
| draggable | Digunakan untuk menentukan apakah elemen dapa di drag |
| lang | Digunakan untuk menentukan bahasa yang digunakan pada isi elemen |
| title | Digunakan untuk memberikan judul elemen |
| translate | Digunakan untuk menentukan apakah elemen dapat di translate |
| tabindex | Digunakan untuk memberikan urutan tabindex |
| spellcheck | Digunakan untuk menentukan apakah isi dari elemen perlu melakukan pengejaan grammer |
| dir | Digunakan untuk menentukan arah dari teks |
Atribut khusus
Atribut khusus adalah atribut yang hanya bisa digunakan pada element tertentu.
Atribut khusus terbagi menjadi dua kategori yaitu,
1. Atribut Wajib
Atribut wajib adalah atribut yang wajib di tambahkan pada element tertentu
| Atribut | Keterangan | Tag |
|---|---|---|
| href | Digunakan untuk meletakan url dari hyperlink | <a> |
| action | Digunakan untuk menentukan aksi yang dilakukan form ketika di submit | <form> |
| src | Digunakan untuk mengambil source | <audio>, <embed>, <iframe>, <img>, dll |
2. Atribut opsional
Atribut opsional adalah atribut khusus yang boleh ditambahkan dan boleh tidak, tergantung kondisi
| Atribut | Keterangan | Tag |
|---|---|---|
| readonly | Membuat form input tidak bisa di tulis | <input type="text, password dll"/> |
| placeholder | memberikan teks alternet pada tag input | <input type="text"> |
| checked | mengubah nilai cek pada checkbox | <input type="checkbox, radio"> |
| methode | mementukan aksi metode post atau get dari form | <form> |
Atribut event
Atribut event adalah atribut yang digunakan untuk meletakan kode javascript, dimana kode javascript tersebut akan bekerja ketika terjadi sesuatu pada elemen, sepeti di klik, di scrool dan lainnya.
| Atribut | Keterangan |
|---|---|
| onclick | Digunakan untuk melakukan aksi tertentu ketika elemen di klik |
| ondbclick | Digunakan untuk melakukan aksi tertentu ketika elemen di double klik |
| onload | Digunanak untuk melakukan aksi tertentu ketika elemen di load |
| onscrool | Digunakan untuk melakukan aksi tertentu ketika elemen di scrool |
| onkeypress | Digunakan untuk melakukan aksi tertentu ketika menekan keyboard |
| oncopy | Digunakan untuk melakukan aksi tertentu ketika elemen di copy |
| onpaste | Digunakan untuk melakukan aksi tertentu ketika elemen paste |
| onfocus | Digunakan untuk melakukan aksi tertentu ketika kursor fokus pada elemen |
Daftar atribut diatas adalah beberapa atribut yang sering digunakan. Masih ada banyak atribut lainnya yang belum bisa tampilkan pada artikel ini, bahkan kalian bisa membuat custom atribut kalian sendiri untuk meletakan value tertentu yang nantinya value tersebut dapat diambil menggunakan javascript berdasarkan custom atrubut yang kita buat.
Next artikel kita akan belajar elemen di html. Jika kalian merasa artikel ini bermanfaat silahkan share dan jika ada hal yang ingin ditanyakan atau disampaikan di kolom komentar.
0 Komentar untuk " Tutorial Lengkap Belajar Html # Mengenal Atribut - Atribut Tag Html"
Silahkan berkomentar dengan baik dan bijak!