Devenisi html <select>:
HTML
select jika diterjemahkan kedalam bahasa Indonesia mempunyai arti memilih, dan mempuyai definisi sebagai memilih dari daftar list pilihan atau drop-dwon.
Dalam penulisan pada html, element
<select> erat kaitanya dengan element <option> yang berfungsi menjadi list daftar pilihan dan menjadi kontrol dari bagian sebuah fungsi.Attribute HTML select :
autofocus
Attribute
autofocus jika digunakan pada html <select> mempunyai fungsi sebagai otomatis fokus atau siap bisa juga standby saat kondisi page berhasil diload. Pada tiap-tiap browser mempunyai tampilan yang berbeda mengenai attribut ini (jika menggunakan standart css pada masing-masing browser), tapi umumnya attribute autofocus akan memiliki tanda biru muda pada garis tepi luar element <select>.Attibute ini mempunyai sifat sebagai attribute boolean, artinya nilai dari attribut ini bisa disebutkan ataupun tidak disebutkan.
Contoh :
<select autofocus="autofocus">
<option value="13px">13 pixel</option>
<option value="14px">14 pixel</option>
<option value="15px">15 pixel</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <select autofocus="autofocus"> <option value="13px">13 pixel</option> <option value="14px">14 pixel</option> <option value="15px">15 pixel</option> </select> <p> Klik Tombol RUN untuk melihat fungsi attribute autofocus </p> </body> </html>
disabled
Attribute
disabled jika diterapkan pada html <select>, maka berfungsi untuk menonaktifkan element <select> itu sendiri, dan user akan tidak bisa melakukan interaksi pada element tersebut, dan otomatis juga element yang berada di dalam <select> menjadi tidak berfungsi.Attibute ini mempunyai sifat sebagai attribute boolean, artinya nilai dari attribut ini bisa disebutkan ataupun tidak disebutkan
Contoh :
<select disabled="disabled">
<option value="13px">13 pixel</option>
<option value="14px">14 pixel</option>
<option value="15px">15 pixel</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <select disabled="disabled"> <option value="13px">13 pixel</option> <option value="14px">14 pixel</option> <option value="15px">15 pixel</option> </select> <p> Element select tidak bisa dipilih </p> </body> </html>
form
Attribute
form jika digunakan pada element <select>, maka element <select> tersebut dikhususkan hanya untuk element <form> tertentu.Dalam menentukan nilai dari attribute ini diambil berdasarkan attribut id dari element
<form>. Attribute ini biasanya digunakan jika element <select> peletakannya berada di luar element <form>. Silahkan lihat contoh berikut ini :Contoh :
<form id="datasiswabaru">
Nama : <input type="text" value="Nama" id="name">
<input type="button" value="Send">
</form>
Umur :
<select id="umur" form="datasiswabaru">
<option value="13 Tahun">13 Tahun</option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
div {padding:15px;background:beige;margin:15px;}
</style>
</head>
<body>
<form id="datasiswabaru">
Nama : <input type="text" value="Nama" id="name">
<input type="button" value="Send" onclick="sendData();">
</form>
Umur :
<select id="umur" form="datasiswabaru">
<option value="13 Tahun">13 Tahun</option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<div id="output-demo">
Element select berada diluar element form <br/>
Perhatikan nama ID element form dan select
</div>
<script>
function sendData() {
alert("Hanya untuk demo");
var e, t, n;
e = document.getElementById("name").value,
t = document.getElementById("umur").value,
n = document.getElementById("output-demo"),
n.innerHTML = "Nama : " + e + "<br/>Umur : " + t;
}
</script>
</body>
</html>
multiple
Attribute multiple jika digunakan pada element
<select>, maka akan memberikan akses kepada user untuk memilih lebih dari satu pilahan. Dalam eksekusinya diperlukan perintah tambahan yang dilakukan oleh user yaitu menekan dan tahan tombol ctrl pada keybord dilanjutkan dengan memilih pilihan element <select>.Attibute ini mempunyai sifat sebagai attribute boolean, artinya nilai dari attribut ini bisa disebutkan ataupun tidak disebutkan.
Contoh :
<select multiple="multiple">
<option value="13px">13 pixel</option>
<option value="14px">14 pixel</option>
<option value="15px">15 pixel</option>
<option value="16px">16 pixel</option>
<option value="17px">17 pixel</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<select multiple="multiple" id="select">
<option value="13px">13 pixel</option>
<option value="14px">14 pixel</option>
<option value="15px">15 pixel</option>
<option value="16px">16 pixel</option>
<option value="17px">17 pixel</option>
</select>
<p>
Tekan dan tahan tombol control pada <b>keybord</b> <br/>
Silahkan pilih pilihan yang ada di element select
</p>
<button onclick="checkValue();">Check Value</button>
<script>
function checkValue() {
for (var e = document.getElementById("select").selectedOptions,
t = 0; t < e.length; t++) alert("Value = " + e[t].value)
}
</script>
</body>
</html>
name
Attribute name jika digunakan pada element
<select>, maka berfungsi sebagai nama dan sebagai kontrol fungsi.Contoh :
<select name="Umur">
<option value="13 Tahun">13 Tahun</option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<form>
Nama : <input type="text" name="Nama">
Umur :
<select name="Umur">
<option value="13 Tahun">13 Tahun</option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<input type="button" value="Send" onclick="alert('hanya untuk demo')">
</form>
</body>
</html>
required
Attribute
required jika digunakan pada element <select>, maka mempunyai fungsi sebagai perintah kepada user bahwa element yang ada pada element <select> harus dipilih atau tidak boleh kosong.Attibute ini mempunyai sifat sebagai attribute boolean, artinya nilai dari attribut ini bisa disebutkan ataupun tidak disebutkan
Contoh :
<select name="umur" required="required" id="select">
<option value=""></option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<p>Status : <span id="text-info"></span></p>
<form>
Nama : <input type="text" name="Nama">
Umur :
<select name="umur" required="required" id="select">
<option value=""></option>
<option value="14 Tahun">14 Tahun</option>
<option value="15 Tahun">15 Tahun</option>
<option value="16 Tahun">16 Tahun</option>
</select>
<input type="submit" value="send" onclick="demo();" id="click">
</form>
<p>
Silihkan pilih value pada bidang umur, klik tombol send <br/>
Lihat perbedaan element select yang di pilih dan tidak.
</p>
<!-- js ini hanya untuk keperluan demo -->
<script>
function demo() {
var e = document.getElementById("select"),
t = document.getElementById("text-info"),
n = document.getElementById("click");
if (e.selectedIndex <= 0) return n.setAttribute("type", "submit"),
t.style.color = "red",
t.innerHTML = "Bidang <b >umur</b> tidak boleh Kosong", !0;
n.setAttribute("type", "button"),
t.style.color = "#0aaf0a",
t.innerHTML = "<b>OK</b> " + e.value + " Terpilih",
alert("hanya untuk demo");
}
</script>
</body>
</html>
Global Attributes:
Element
<select> mencakup Global Attributes HTML.
Event Attributes:
Element
<select> mencakup Event Attributes HTML.
Browser Support :
| HTML | |||||
|---|---|---|---|---|---|
| Element | Chrome | Safari | Firefox | Opera | IE / Edge |
<select> | Ya | Ya | Ya | Ya | Ya |
Default CSS :
Browser yang support dengan element
<select>, biasanya mempunyai nilai default :/* tidak ada nilai default */
Tiap-tiap browser akan membawa bahasa css masing masing, tapi element
<select> akan mempunyai tampilan yang lebih jika ditambahakan css tambahan.