Panduan lengkap elemen interaktif HTML untuk pengembangan web modern
HTML menyediakan berbagai elemen untuk membuat antarmuka yang interaktif dan responsif.
<!-- Tombol dengan berbagai tipe -->
<button type="button">Klik Saya</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<!-- Dropdown menu -->
<select name="pilihan">
<option value="1">Pilihan 1</option>
<option value="2" selected>Pilihan 2</option>
</select>
<!-- Checkbox dan Radio -->
<input type="checkbox" id="setuju" name="setuju">
<label for="setuju">Saya setuju</label>
<input type="radio" id="pria" name="gender" value="pria">
<label for="pria">Pria</label>
🔍 Penjelasan Detail:
• <button> - Elemen interaktif utama dengan berbagai tipe (button, submit, reset)
• <select> - Membuat dropdown menu dengan opsi pilihan
• <option> - Item dalam dropdown (selected untuk pilihan default)
• type="checkbox" - Kotak centang untuk pilihan multiple
• type="radio" - Tombol radio untuk pilihan tunggal dalam grup
• <label> - Penting untuk aksesibilitas dan usability
• for pada label harus sesuai dengan id input
Gunakan atribut disabled pada elemen interaktif ketika tidak aktif, dan aria-* untuk meningkatkan aksesibilitas!
HTML5 memperkenalkan berbagai elemen interaktif baru yang lebih canggih.
<!-- Range slider -->
<input type="range" min="0" max="100" value="50" class="slider">
<!-- Color picker -->
<input type="color" value="#00bcd4">
<!-- Date picker -->
<input type="date" min="2023-01-01" max="2023-12-31">
<!-- Details disclosure -->
<details>
<summary>Klik untuk detail</summary>
<p>Konten tambahan yang bisa dibuka/tutup</p>
</details>
<!-- Dialog modal -->
<dialog open>
<p>Ini adalah dialog modal!</p>
<button type="button" onclick="this.parentElement.close()">Tutup</button>
</dialog>
🔍 Penjelasan Detail:
• type="range" - Slider untuk memilih nilai dalam range
• type="color" - Picker warna native
• type="date" - Kalender untuk memilih tanggal (bisa dengan min/max)
• <details> dan <summary> - Membuat konten yang bisa dibuka/tutup
• <dialog> - Kotak dialog/modal (gunakan JavaScript untuk toggle)
• open - Atribut untuk menampilkan dialog secara default
• Banyak elemen ini memiliki pseudo-class CSS seperti :checked dan :focus
Untuk dialog yang lebih kompleks, gunakan atribut aria-modal="true" dan kelola fokus keyboard untuk aksesibilitas yang lebih baik!
Gunakan CSS untuk membuat elemen interaktif lebih menarik dan konsisten di berbagai browser.
/* Style dasar untuk tombol */
button {
background: #00bcd4;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #00e5ff;
transform: translateY(-2px);
}
/* Style untuk input */
input, select {
padding: 0.5rem;
border: 1px solid #444;
border-radius: 4px;
background: #2d2d2d;
color: #e0e0e0;
}
/* Style khusus untuk range slider */
input[type="range"] {
-webkit-appearance: none;
height: 5px;
background: #444;
border-radius: 5px;
}
/* Style untuk dialog */
dialog {
border: none;
border-radius: 8px;
background: #2d2d2d;
color: white;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
🔍 Penjelasan Detail:
• cursor: pointer - Mengubah kursor saat hover untuk menunjukkan interaktivitas
• transition - Animasi halus saat perubahan state
• :hover dan :focus - State penting untuk feedback visual
• -webkit-appearance: none - Reset style default browser
• Pseudo-elemen seperti ::-webkit-slider-thumb untuk styling lebih dalam
• box-shadow - Memberikan depth pada elemen interaktif
• Warna kontras untuk state aktif/fokus meningkatkan aksesibilitas
• Media query untuk penyesuaian di berbagai ukuran layar
Gunakan :focus-visible untuk styling fokus yang hanya muncul saat navigasi keyboard, bukan klik mouse!